2008-3-25
IE 的 text-indent Bug
今天遇到的一个 Bug，主要表现为：当容器的第一个子元素为 inline 属性，并且为该子元素定义了 text-indent 的话，IE 渲染出错。阅读全文...
例子 1：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 text-indent 只在 block 级别的元素中体现，在本例中的 span 元素中，应予忽略。
例子 2：
给 span 加个浮动，让它自动成为 block 元素看看。
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: left; background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 span 将自身的 text-indent 属性传递给了它的父元素 div。
例子 3：
负值的 text-indent 会是怎样呢？
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误，我们什么也看不到了：
错在 span 不但将自身的 text-indent 属性传递给了它的父元素 div，而且还将超出的内容隐藏了，在没有定义 overflow 属性时，元素的默认 overflow 属性应该是 visible。
例子 4：
既浮动，又负值的 text-indent 呢？（事实上我正是在这种情况下遭遇了这个 Bug）：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: right; margin-left: 5px; width: 40px; background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，仍然是错误：
依然是 span 将自身的 text-indent 属性传递给了它的父元素，并将超出的内容隐藏了。
以上的 Bug 在 IE8 的“IE7 mode”中得到了部分修正，当 span 为浮动时基本是正常的，但默认情况下仍然错误。其他版本未测试。
标签： browser-bugs, css, ie, web
2006-11-9
利用outline以及IE的button背景图Bug制作双线边框的按钮
首先声明一下，这篇文章中所讲的实例使用到了浏览器的Bug，这是不被推荐的，仅供大家参考一下。或者在确认这个方案对整个网站的整体效果影响不大的时候，可以小用一下。
我们都知道，在CSS默认的边框属性中，有double这个选项，代表双线，但是在实际运用中，这个属性的效果并不理想，两层边框只能使用一种颜色，而且各个浏览器的解释也略有差异。
在一次工作实例中，我本想给<button>添加一个背景图片，做一个好看点的按钮，却发现IE在显示<button>的背景图片时，存在一个Bug：IE总是在<button>的边框和背景图之间，显示1px宽的间隙，间隙的颜色由<button>的背景颜色决定。
这个发现非常好玩，本来<button>只有一层边框，现在看起来就像是内外两层边框了。这样不就可以做出双层边框效果的按钮了吗。不过说到底，这只是IE的Bug，其他的现代浏览器在显示<button>的背景图片时，还是非常标准的，不存在这1px的间隙。好在CSS 2有另外一个属性：outline，这个属性理所当然的不被IE支持，Firefox，Opera，Safari等浏览器的当前版本都可以正常显示它。这样，我们就可以有一个方案了：
- 对于IE，使用border做外边框，使用Bug中提到的1px间隙做内边框
- 对于现代浏览器，使用outline做外边框，使用border做内边框
完整的方案如下图所示：
经过美化后的CSS方案：
button {
line-height: 40px;
color: #1e3182;
background: #FFF url(button_bg.png) repeat-x 0 0;
padding: 0 1.5em 0 2em;
letter-spacing: 0.5em;
cursor: pointer;
}
*>button { /*for modern browser*/
height: 40px;
outline: 1px solid #9DAAE2;
border: 1px solid #FFF !important;
}
* html button { /* for IE 6.0/IE 5.* */
border: 1px solid #9DAAE2;
}
*+html button { /* for IE 7 */
border: 1px solid #9DAAE2 !important;
}
这个方案的优点是：
- 可以随意变换双层边框的颜色，内外边框可以不同
- 按钮的宽度不用定死，由其内部的文字多少来决定
- 按钮所用到的图片只是很窄的一幅背景图
当然缺点就是双线边框中的内边框在IE下只能是1px，而且由因IE修补Bug而导致方案失效的危险。
您可以在这个页面看到实例，虽然由于浏览器的其他原因，显示的效果略有差异：IE 6高出了3px，IE 7.0又矮了两个象素，而且IE显示的宽度都比实际定义的宽出一些，但双线的效果总算都还可以接受。
标签： browser-bugs, css, ie, web
2006-11-7
Opera下max-width与display:table-cell的显示bug
max-width和disply:table-cell是非常好用的两个CSS属性。利用max-width和max-height，可以非常方便的将网页中的图片缩小到一定尺寸，而且保证较小的图片不会被放大，图片的宽高比例也不会被强行改变。而disply:table-cell和其他的disply:table等属性结合，可以用div等标签模拟出table的结构，对于页面的排版也非常有用。
但是现在看来，Opera(9.00)对max-width的解释有些跟其他浏览器不一致。如果一个图片的原始宽度是300px，在CSS中定义它的max-width为100px，Opera确实能够按照max-width的值显示，但是这个图片在页面中所占据的实际位置却仍然按照原始宽度300px来计算。这点在普通情况下不太明显，一旦把图片放置在一个disply为table-cell的元素中，例如常规的td，或者是disply定义为table-cell的div或其他元素，问题就出来了。Opera会依照图片的原始宽度，把table-cell撑开到300px，虽然显示的图片只有100px宽。而高度却显示正常。阅读全文...
下图说明了Firefox对这种情况的显示方式，这也正式我们希望的：
而Opeera却是这样显示的：
这里有一个实例，您可以在不同的浏览器中查看本页的显示结果，当然，不要对IE抱有太大的希望。
这是一张原始图片，尺寸为300px/300px，我们把它max-width和max-height都定义为100px：
img {
max-width: 100px;
max-height: 100px;
}
把它放置在一个宽度和高度均为200px的单元格td中：
td {
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
|
|
把它放置在一个disply为table-cell，宽度和高度均为200px的span标签中，之所以选择span标签，是为了更能体现出IE的显示效果，另外，span之外需要有一个display为table的元素，我们选用一个div：
span {
disply: table-cell;
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
标签： browser-bugs, css, max-width, opera, web