IE CSS显示:内联块渲染问题
Ala*_*ter 18 html css internet-explorer rendering
我的IE代码有一个恼人的渲染问题
CSS:
div {
display: inline-block;
margin-right:40px;
border: 1px solid;
}
HTML:
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
这是它在firefox/chrome中的外观(预期的显示)
这就是它在IE中的样子
如果IE支持display:inline-block,我用google搜索,显然它确实如此.
Tim*_*ora 15
工作方案
以下似乎可以正常工作:
- 怪癖模式
- IE 7标准
- IE 8标准
- IE 9标准
- IE 9兼容模式
<!DOCTYPE html>
<html>
<head>
<style>
DIV {
display: inline-block;
*display: inline; /* leading asterisk IS correct */
margin-right:40px;
border: 1px solid;
zoom: 1; /* seems to fix drawing bug on border in IE 7 */
}
</style>
</head>
<body>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
</body>
</html>
回答历史
在IE9标准模式下适合我.在怪癖模式下无法正确显示(如您所述).
使用IE9进行测试:
- 怪癖模式:阻止(不正确)
- IE 7标准:阻止(不正确)
- IE 8标准:内联(正确)
- IE 9标准:内联(正确)
- IE 9兼容模式:内联(正确)
欺骗IE7:
div {
display: inline-block;
*display: inline; /* leading asterisk IS correct */
margin-right:40px;
border: 1px solid;
}
摘自这篇文章.在IE 7仿真模式下适用于我.
根据@SKS关于doctype的评论,我添加了一个指定了doctype的完整解决方案.
- @AlanFoster你可以在你的标题中使用`<meta http-equiv ="X-UA-Compatible"content ="IE = edge"/>`meta来使用最高的渲染引擎运行IE,而不是诉诸兼容性尽管IE7仍然以你现在看到的方式运行,所以你可能仍然想要实现这种黑客攻击. (2认同)
Sel*_*gam 13
将DOCTYPE添加到您的html中,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
添加之后,它对我有用.
注意:在jsFiddle中,DOCTYPE是自动生成的,因此它可以在那里工作.
编辑1: 检查此信息以获取更多信息,
编辑2: 您可以在此处阅读有关内联块样式的更多信息
小智 5
对我来说,添加此代码:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
标题信息.