99css: 浏览器bug

显示标签为“浏览器bug”的博文。显示所有博文

2009年10月31日星期六

Pixel Perfect 1

花了几个小时小小研究了一下中文字体：

使用的是 Arial 字体（不同字体下的结果不同，即便同为中文）
列分别为12px文字、12px链接、12px加粗文字、12px加粗链接、14px文字、14px链接、14px加粗文字、14px加粗链接
行分别为IE6、IE7、IE8、FF3.5

点击图片看大图

结论：

Arail	12px	14px文字
ie6/7	高11px占14px 上0下3px 下划线在13px处	高13px占16px 上0下3px 下划线在15px处
ie8	高11px占15px 上0下4px 下划线在12px处	高13px占16px 上0下3px 下划线在14px处
ff3.5	字11px高15px 上2px下2px 下划线在14px处	高13px占16px 上1px下2px 下划线在16px处

2009年10月24日星期六

IE 6&7 z-index bug

很老的 bug了，详细描述看下面几篇文章吧：

文中给出的方法简单明了，不过有时页面比较复杂，只有通过用JS遍历 position:relative 元素并改变其 z-index 值来解决了。有了 JS 框架则更加简单。《Fixing IE z-index》分别给出了 jQuery 和 MooTools 版本，下面是 jQuery 版本的代码：

$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});

DEMO 在此

2009年9月27日星期日

IE6 绝对定位元素的 1px 间距 bug

IE6- 有一个非常讨厌的 bug，当绝对定位元素的父元素高或宽为奇数时，bottom 和 right 会获取错误。

HTML

<div class="outer height199">
 <p>This container has a height of 199px and width of 199px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>
<div class="outer height200">
 <p>This container has a height of 200px and width of 200px</p>
 <div class="inner">img</div>
 <div class="inner2">img</div>
</div>

CSS

.outer{
 width:200px;
 background:red;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}

.inner,.inner2{
 width:30px;
 height:30px;
 position:absolute;
 background:blue;
}
.inner{
 bottom:0;
 left:0;
}
.inner2{
 top:0;
 right:0;

}
p{clear:both;margin:0 40px 1em 5px}

可以看出在奇数容器下出现了1px 间距，而在偶数容器下正常。

不完美的解决方法：改变结构并使用浮动

HTML

<div class="fix">
 <div class="outer height199">
  <div class="inner2">img</div>
  <p>This container has a height of 199px</p>
 </div>
 <div class="inner">img</div>
</div>
<div class="fix">
 <div class="outer height200">
  <div class="inner2">img</div>
  <p>This container has a height of 200px</p>
 </div>
 <div class="inner">img</div>
</div>

CSS

.fix {
 width:200px;
 margin:10px;
 position:relative;
 float:left;
    display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
 clear:both;
 margin-top:-30px;
 position:relative;
 float:left;
}
.fix .inner2{float:right;position:static}

ytzong 简译自《IE6 1px gap on absolute elements》

2009年9月8日星期二

使用 background:url(#) 解决 IE6&7 bug

通过设置selector{background:url(#)}可以解决一些IE6&7 bug：

鼠标滚轮失效bug，demo。当时用的是添加背景色的方法：
```
#works{background:#fff}
```
也可通过下面方法解决：
```
#works{background:url(#)}
```
a 标签为了 png-24 图片透明而使用透明滤镜后导致 a 链接不可点击，demo
```
a{background:none}
```
解决方法(demo)：
```
a{background:url(#);/*或指向透明的gif*/}
```
详见 No Transparency Click Bug
a 局部点击bug，demo。解决方法(demo)：
```
a{background:url(#)}
```
或：
```
a{background: #fff}
```
详见：Partial Click Bug v2

标准模式中的 IE 6&7 width 100% bug

在 web app 项目中经常遇到这个 bug，国外称之为 100% ≠ 100% bug，又分为两种：

div 的宽度 100% ≠ 100% (IE 6&7)
需求：
1. 标准模式
2. #container 局部滚动
3. #asie 固定宽度
4. #content 自适应宽度
再复杂一点还会要求两列等高，可参考 http://www.99css.com/2009/07/equal-height-columns-with-cross-browser.html

HTML
```
<div id="container">
    <div id="wrapper">
        <div id="content">
            <h2>Content</h2>
        </div>
    </div>
    <div id="aside">
        <h2>Aside</h2>
    </div>
</div>
```
当然，别忘了 DTD 声明，因为这个只存在于标准模式
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
用之前介绍的 HTML5 写法亦可：
```
<!DOCTYPE html>
```
CSS
```
/*简单重置*/
body, div, h2{margin:0;padding:0;}
/*设置颜色，方便区分*/
#container{background:yellow;}
#content{background:#FF8539;}
#aside{background:#B9CAFF;}
/*去除html默认滚动条*/
html{overflow-y:hidden;}
/*关键布局代码*/
#container{height:300px;overflow:auto;}
#wrapper{float:left;width:100%;margin-left:-200px;}
#content{margin-left:200px;}
#aside{float:right;width:200px;}
```
当#content, #aside{height:200px;}时，即高度未超出#container时一切正常

当#content, #aside{height:400px;}时，出现纵向滚动条

正常显示效果如下：

IE 6&7 中 bug 出现：

原因：IE 6&7 滚动条的宽度未算在 100% 中，理想的状况是：#container 的宽度(100%) + #container 滚动条的宽度 = body 的 100%，W3C 对此的定义：

In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars.

《 Internet Explorer 100% Width Bug》中给出了思路：
```
element_selector {
width: expression(this.parentNode.offsetHeight >
this.parentNode.scrollHeight ? '100%' :
parseInt(this.parentNode.offsetWidth - XX) + 'px');
}
```
其中 XX 是滚动条的宽度，在 Windows XP 主题下是 17px，Windows 经典主题下稍微小一点，在其他第三方系统主题下有可能是不确定宽度。

根据下图，简单改进一下即可

解决方法
```
#wrapper{#width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
```
当然，写在 js 中亦可，不过要注意不要漏掉 window 的 riseze 事件，另外，window 的 resize 事件在 IE 中有执行多次的 bug
body 的宽度 100% ≠ 100% (仅 IE6)
通常表现为 iframe 出现纵向滚动条时同时出现横向滚动条，简单粗暴的使用body{overflow-x:hidden;}是不负责任的，有时会截断要显示的内容

第一个页面(父页面)
```
<iframe frameborder="0" height="300" scrolling="auto" src="iframe.html" width="500">
```
第二个页面(iframe)

HTML
```
<div></div>
```
CSS
```
body, div{margin:0;padding:0;}
div{background-color:yellow;height:500px;}
```
正常效果

IE6

解决方法(原理同上)
```
body{_width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');}
```

折腾了这么久，哥累了，哥真的希望 IE 只是个传说

2009年4月23日星期四

IE 6/7 鼠标滚轮失效Bug

前言：

万恶的IE总是带给我们“惊喜”，比如滚轮失效。

解决方法：

你可以尝试用以下方法解决：

去除以下代码（IE7下遇到过一次）
```
html{overflow-x:hidden;}
```
在滚动区域加上如下代码（IE6下遇过一次）
```
selcetor{background-color:white;}
```

延伸阅读：

Internet Explorer bug: Broken mouse wheel scrolling Demo

2009年4月16日星期四

说说display:inline-block

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok...

基本用法：

inline元素的inline-block：
```
span{displsy:inline-blcok;}
```
block元素的inline-block：
```
div{displsy:inline-blcok;#displsy:inline;#zoom:1;}
```
#开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

代码

格式化对间距的影响：

HTML：
```
<ul>
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
</ul>
```
注意代码的缩进为4个空格

CSS：
```
/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
li{display:inline-block;#display:inline;#zoom:1;padding:1px 5px;border:1px #ccc solid;background-color:black;cursor:pointer;color:white;}
li.current{background-color:#c31909;}
```
以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

可见除IE6/7外的浏览器的li之间有4px的间隔。

HTML将缩进去除则正常：
```
<ul>
<li class="current">1</li><li>2</li><li>3</li>
</ul>
```
以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

由此分析，这4px可理解为一个空格。

当然，我们的HTML代码是给人看的，加上编辑器有格式化代码工具，缩进不能去除，而且在实际应用中li之间往往有一定的间距，所以我的做法是顺水推舟，仅对IE 6/7 hack：
```
li{#margin-right:4px;}
```

overflow引起Firefox 3 bug：

HTML：

<a href="#">订阅</a>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE6）：

IE 7/8 的padding有点小问题，不过基本可以忽略。

如果给a加上overflow:hidden（此处的overflow:hidden没有必要，仅为演示使用）

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;overflow:hidden;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

Firefox 3显示效果：

text-align:center失效！其余浏览器皆正常（这里有点小插曲，开始我误以为是td中的inline-block元素不能居中，后来发现是overflow:hidden的问题），经测试overflow:auto也会出现此问题，不过这个更少用到。

IE 6的line-height失效：

HTML：

<p>欢迎使用<span></span>飞信</p>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
p{background-color:yellow;line-height:5;}
span{display:inline-block;width:16px;height:16px;background-image:url('http://images.n20svrg.139.com/simple2008/coremail/images/simple_icons.png');background-repeat:no-repeat;background-position:-500px -50px;vertical-align:middle;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

未找到根治方法，可变通一下用padding解决：

p{background-color:yellow;padding:2em 0;}

总结：

即便如此，我还是会继续使用下去-:P

2009年4月3日星期五

Firefox 3 Bug：Iframe页面被带入Quirks Mode

前言：

在B/S系统中经常用到iframe，iframe中的数据用表格填充。

BUG:

标准模式时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

进入iframe页面时th及td的字体不继承body的样式（偶尔出现）。

分析：

用firebug查看某一单元格（先在选项中选中显示浏览器默认样式），如下图：

其中style.css是我写的CSS，quirk.css为firefox在Quirks Mode时的默认样式，位于安装目录下的res文件夹中（各标签默认样式的html.css也在其中）。

可见firefox进入了Quirks Mode。

解决方法：

~~设置字体时，th/td和body写在一起：~~

body, th, td{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

~~另外：~~

~~因该bug偶然出现，未测试以下是方法否可以解决，有兴趣的童鞋可以试下并留言：~~

th, td{font-size:inherit;font-family:inherit;}

2009-4-14更新：

今天再次遇到这个问题，reset中已经设置了

th{font-size:inherit;font-family:inherit;}

其实是继承了quirks.css中的table的字体

最终的解决方法：

body, table{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

另外：

这里仅仅是字体的设置，Firefox中Quirks Mode的其他影响还需仔细研读下quirks.css

2009年3月27日星期五

IE6 BUG：边框不能设为透明

前言：

有时候我们需要用纯CSS来写小三角，如下图：

代码：

HTML：

<body>
<div class="pointer">
</div>
</body>

CSS：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;}

为了方便看效果，特意放大

问题：

正常显示效果：

IE6下却遭遇BUG（不透明）：

解决方法：

将实线改为虚线，代码：

body{background-color:yellow;}
.pointer{width:0;height:0;border-top:100px transparent dotted;/*dashed亦可*/border-right:200px red solid;font-size:0;}

IE6下显示效果：

虽然边缘有轻微锯齿，但可以接受

意外收获：

Firefox、Chrome边缘比较平滑

而IE 6/7/8、Opera、Safari边缘有轻微锯齿

2009年3月17日星期二

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

问题如下图：

解决思路：

当鼠标移到select元素时将其宽度置为auto；
鼠标移开时恢复为原定宽度。

代码（基于jQuery）：

$(function() {
 $(".ProductAttributesSelect")
     .mouseover(function(){
         $(this)
             .data("origWidth", $(this).css("width"))
             .css("width", "auto");
     })
     .mouseout(function(){
         $(this).css("width", $(this).data("origWidth"));
     });
});

英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(∩_∩)O~

简译自：Select Cuts Off Options In IE (Fix)

2009年2月28日星期六

IE 6/7 Bug: 在fieldset中隐藏legend所引发的bug

HTML：

<fieldset>
<legend>登陆</legend>
<ul>
<li><label>账号：</label><input type="text" /></li>
<li><label>密码：</label><input type="password" /></li>
</ul>
</fieldset>

CSS：

body{font-family:Arial, Helvetica, sans-serif;font-size:14px;}
fieldset, ul{margin:0;padding:0;}
li{margin:1em;list-style-type:none;}
fieldset{width:300px;border:5px solid red;}
legend{display:none;}/*隐藏legend*/
ul{border:5px solid black;}
input{width:200px;padding:2px;}

正常效果：

IE 6/7显示效果：

解决方法：

删除legend
在fieldset外套一个div，并将样式写在此div上

基于语义等因素推荐使用第二种方法。

2009-4-2补充：

fieldset与legend的bug不止这一个，最好就是在fieldset外部或内部加个div，legend中加个span，为以后的界面改动预留退路！

99css

Pixel Perfect 1

结论：

IE 6&7 z-index bug

IE6 绝对定位元素的 1px 间距 bug

使用 background:url(#) 解决 IE6&7 bug

标准模式中的 IE 6&7 width 100% bug

IE 6/7 鼠标滚轮失效Bug

说说display:inline-block

Firefox 3 Bug：Iframe页面被带入Quirks Mode

IE6 BUG：边框不能设为透明

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

IE 6/7 Bug: 在fieldset中隐藏legend所引发的bug

简介

订阅数

标签

归档

链接

抠抠