Question

我的网站目前存储在http://www.robmyrick.com上。这是一个非常简单的html / css网站，没有任何复杂的功能。我已经做了大量关于如何设置页面的研究，以便它们随屏幕分辨率和浏览器之间的变化而变化。

具体问题：

IE8，IE9和Safari之间的页眉图像显示不正确。
“最大化现金流量”下主页上的项目符号显示正确和错误，具体取决于浏览器。
根据浏览器的不同，页面上的Div背景显示正确和错误。

我知道即使在多浏览器环境中，网页也可以做得更好。我做错了什么???

任何帮助都会在一些一般规则中受到赞赏。

Answer 1

Validate your html表示需要更正的错误列表。

Answer 2

1）IE8，IE9和Safari之间的页眉图像显示不正确。

在Safari中，我无法看到标题图片的问题。您必须通过“错误显示”来定义您的意思。

2）主页上的“最大化现金流量”下的子弹出现正确和错误，具体取决于浏览器。

难怪你有一些布局问题。所有不间断的空格都缺少;。它们应该是 ，您可以反复使用&nbsp。如果您依靠不间断的空间进行布局，浏览器很可能会忽略它们。

我在Safari中并且在“最大化现金流”下看不到任何项目符号，我只看到渲染文本和“＆amp; nbsp”。示例：“＆amp; nbspWe提供内部服务......”

即使您修复了不间断的空格，我仍然看不出这是如何将它变成项目符号列表的。在那里根本没有使用<ul>或<li>个标签。

3）页面上的Div背景显示正确和错误，取决于浏览器。

您使用相同的ID两次：#backgroundmiddle。通常，浏览器倾向于忽略相同id的第二个实例。也许这是你在上面描述的问题＃3的根源。

见the W3C regarding validation errors。每个浏览器都以自己的方式处理这些错误，因此每个浏览器都会以不同方式解释您的错误，从而以不同的方式呈现页面。

我无法保证这会解决您的所有问题，但在攻击任何剩余问题之前，您必须至少确保验证。

Answer 3

据称，IE9是微软改进/标准兼容的产品，而且IE9还没有完全出现，最重要的是使用浏览器黑客并不是一个好习惯。存在其他解决方案，例如重置CSS，IE条件注释等，您可以使用它们。 34投票

我更喜欢Paul Irish的方法：

将其粘贴在开头标记的位置：

<!--[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]-->

并像这样使用它：

.foo { color: black; } /* Awesome browsers */
.ie8 .foo { color: green; } /* IE8 */
.ie7 .foo { color: blue; } /* IE7 */
.ie6 .foo { color: red; } /* IE6- */

这是一种巧妙的方式来进行IE特定的CSS样式。但是就像其他人提到的那样小心不要过度浏览器检测。：）

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 */
}

除非你想匹配Opera，否则\ 0 /之前的空格是必需的。

IE9的跨浏览器修复程序

3 个答案: