某些页面通常在IE中显示得很糟糕,解决这些问题的最佳方法是什么?
您忘记添加doctype,所以您的页面处于Quirks模式
添加这个(HTML5 doctype)作为第一行:
<!DOCTYPE html>
,它应该看起来更好。
虽然,手动更改文档模式(使用开发人员工具;按下F12),看起来还是不对。这个页面显然还有其他问题。
最相关的问题(在转义了Quirks模式之后)是:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer没有显示任何背景颜色,因为您在颜色之前忘记了#
。(你有padding; 0
,用;
代替:
)
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
但是你不应该首先使用内联样式…
这样会更好:
<body>
与CSS 在您的样式表:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
你的意思是在IE中div 's更小。这是因为在IE css边界,边距包括在宽度声明。所以,如果你给div的宽度为100px,两边的边距为10px,那么在IE中这个div的实际可见宽度将是100-10-10=80px。为了解决这个问题,你可以使用子css声明。考虑到我们的例子,如果你想在两个浏览器中显示这个div宽度为100px,请执行以下操作
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
使用这个你可以统一你的div在IE和非IE浏览器的宽度
与其指出每个元素在IE中呈现方式不同的原因,我强烈建议不要每次创建一个新的页面元素时都重新发明轮子。
即使在抱怨标准的现代浏览器中,CSS也可能非常不可预测,因此最好使用来自可信来源(如
)的防弹代码片段。CSS遗失手册
CSS权威指南
CSS食谱从HTML/CSS的工作块开始,根据你的喜好修改它们,然后在那里进行跨浏览器测试。