Internet Explorer 8忽略'display:table-cell'元素的宽度
Nik*_*bak 16 html css internet-explorer internet-explorer-8
根据怪癖模式,Internet Explorer 8确实支持显示属性的表选项,但在这个例子中它表现出非常奇怪的行为
http://jsfiddle.net/e3cUn/3/
在普通浏览器中,内部图像将缩放以适合150x150的盒子,而不会改变尺寸比(拉伸).
但在IE8中,外框(蓝色)也将拉伸:
1)你见过这样的东西吗？它似乎与text-align:center:删除此属性修复了问题,但我确实需要居中图像(至少在非ie浏览器中).
2)如果无法正确修复,我该如何display为IE 提供特殊值？我在网上看过一些例子#display: block;,但是所有这些例子都只适用于IE7.
编辑我知道<!--[if IE 8]>和类似的命令放入HTML,但我实际上是在寻找一种方法在css文件中.像这样的东西
display: table-cell;
#display: block;
第二行不是注释,它会覆盖ie7及以下的先前值.(但不是ie8)
谢谢!
And*_*y E 19
在添加赏金之后,我最终通过将我的CSS定位到IE8来解决这个问题.我已经使用Paul Irish的技术,<html>使用条件注释向元素添加类:
<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
因此,我所要做的就是为IE 8及更低版本添加额外的CSS规则:
.img-container { display: table-cell; } /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */
结合垂直居中图像的技术,这给了我一个很好的跨浏览器解决方案.
San*_*ooj 12
使用width而不是max-width因为在ie8中,将为表格采用图像的实际宽度.检查这个小提琴.
重新排列CSS:
.root img {
width: 130px;
max-height: 130px;
}
更新
CSS:
.root span {
width:130px;
overflow:hidden;
display:inline-block;
}
.root img {
max-width: 130px;
max-height: 130px;
}
HTML:
<div class="root">
<span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span>
</div>
| 归档时间： |
|
| 查看次数： |
32960 次 |
| 最近记录： |