Ang*_*nes 2 css internet-explorer button internet-explorer-9
我目前正在调查CSS min-widthInternet Explorer中属性的奇怪行为.我听说过使用文本对齐的错误min-width.但这个对我来说是新的.
<table cellspacing="0" cellpadding="0">
<tr>
<td><button>Einloggen</button></td>
</tr>
</table>
当我将min-width按钮设置为实际拉伸按钮的值时,它右侧的空间出现/ td变宽.我只在IE中看到过这种行为.同时检查Opera,FF,Chrome和Safari.
这是一个显示包含示例的jsfiddle.
这是一个已知的错误？有没有解决方法？
在这里使用Internet Explorer 9似乎有一个奇怪的问题.有趣的是,版本8和10都正确地呈现了这个演示,没有问题.
话虽如此,关于IE9,我找到了似乎可以解决问题的解决方法.我的成功是使用伪元素::before作为后备:
/* For everybody but IE9 */
button {
min-width: 200px;
}
/* For Internet Explorer 9 */
button::before {
content: "" \9;
display: block;
width: 200px;
}
小提琴:http://jsfiddle.net/JNDUz/21/
虽然这有效,但它确实导致Internet Explorer 10中的按钮略宽(伪元素宽度+父填充/边距).这些黑客在IE10中没有业务,但很难将CSS单独隔离到某些浏览器.这个\9技巧可以将它与非IE浏览器隔离开来,但有更好的方法:
<!--[if IE 9]><html lang="en-us" class="no-js ie9"><![endif]-->
通过将HTML标记包装在条件注释中,我们现在可以使用我们的修复单独定位IE:
/* For Internet Explorer 9 */
.ie9 button::before {
content: "";
display: block;
width: 200px;
}
| 归档时间： |
|
| 查看次数： |
1162 次 |
| 最近记录： |