Html IE9的跨浏览器修复
我有一个网站目前存储在。这是一个非常简单的html/css网站,没有任何复杂的功能。我已经做了大量的研究,研究如何设置页面,使其随着屏幕分辨率和浏览器之间的变化而变化 具体问题:Html IE9的跨浏览器修复,html,css,internet-explorer-8,cross-browser,internet-explorer-9,Html,Css,Internet Explorer 8,Cross Browser,Internet Explorer 9,我有一个网站目前存储在。这是一个非常简单的html/css网站,没有任何复杂的功能。我已经做了大量的研究,研究如何设置页面,使其随着屏幕分辨率和浏览器之间的变化而变化 具体问题: IE8、IE9和Safari之间的标题图像显示不正确 主页上“最大化现金流”下的项目符号显示正确与否取决于浏览器 页面上的Div背景显示正确与否取决于浏览器 我知道网页可以做得更好,即使在多浏览器环境下。我做错了什么 对于需要遵循的一些一般规则,如果您能提供任何帮助,我们将不胜感激。对于需要更正的错误列表 1) IE8
2) 主页上“最大化现金流”下的项目符号同时出现 是否正确,取决于浏览器 难怪你会遇到一些布局问题。所有非中断空格都缺少
代码>。它们应该是
,您可以反复使用
。如果你在布局上依赖于不间断的空格,那么浏览器很有可能会忽略它们
我在Safari中,在“最大化现金流”下看不到任何项目符号,我只看到渲染文本和“ ”。示例:“ 我们提供内部服务…”
即使你修复了不间断的空格,我仍然不明白这是如何使它成为一个项目符号列表的。这里根本没有使用
或
标签
3) 页面上的Div背景显示正确或不正确,
取决于浏览器
您使用同一id两次:#backgroundmiddle
。通常,浏览器倾向于忽略相同id的第二个实例。这可能是您上面描述的问题3的根源
看。每个浏览器都以自己的方式处理这些错误,因此每个浏览器对错误的解释都不同,因此呈现页面的方式也不同
我不能保证这会解决你所有的问题,但你至少必须确保它在攻击任何遗留问题之前进行验证。IE9被认为是微软改进了很多/符合标准的产品,顺便说一句,IE9还没有完全实现,最重要的是,使用浏览器黑客根本不是一个好做法。还有其他解决方案,如重置CSS,即条件注释等,您可以使用。
34票反对
我更喜欢保罗·爱尔兰的方法:
将此标签粘贴到打开标签的位置:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这真是一个巧妙的方法来做IE特定的CSS样式。但就像其他人提到的那样,小心不要过度检测浏览器
除非您也希望与Opera匹配,否则\0/之前的空格是必需的。在这里询问“要遵循的一般规则”是一个过于宽泛的问题。我建议你坚持上面提到的三个具体问题。
.foo { color: black; } /* Awesome browsers */
.ie8 .foo { color: green; } /* IE8 */
.ie7 .foo { color: blue; } /* IE7 */
.ie6 .foo { color: red; } /* IE6- */
IE6 - IE10pp4 hacks
No IE9 or IE10pp4 specific hacks have been found.
#element {
color:black;
}
#element {
*color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green \0/; /* IE8+9 */
}
@media all and (min-width:0) {
#element { color:pink \0/; } /* IE9-IE10pp4 */
}