IE8 优化问题（<div> 中的浮动元素，<header> 中的渐变...）答案

【问题标题】：IE8 Optimization Problems (Floated elements in <div>, Gradients in <header> ...)IE8 优化问题（<div> 中的浮动元素，<header> 中的渐变...）
【发布时间】：2013-07-25 20:29:54
【问题描述】：

我最近在 IE8 中测试了我的浏览器，似乎很多东西都坏了。这是我在测试服务器上的站点：[已编辑]。如果您在任何最新的浏览器中使用它，它看起来会很好。但是，如果你在 IE8（或兼容模式下的 IE10）中查看它，就会出现一些问题。

1) 最大的问题是容器不工作。我有一个围绕某些元素的容器类，它使内容保持居中并保持固定宽度，同时还允许页眉/页脚占据屏幕的整个宽度。在 IE8 中，固定宽度不起作用。

容器的 CSS

.container {
    margin: 0 auto;
    max-width: 1000px;
    min-width: 916px;
}

这里是它在 HTML 中使用的 1 次示例（在此示例中为标题。PHP 用于突出显示菜单中的当前页面）。

<header>
    <div class="container">
        <div class="float-left">
            <a href="/index.php" class="home"><img src="/Images/logo.png" id="logo" alt="logo" /></a>
        </div>

        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li><a href="/index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?> class="home">HOME</a></li>
                    <li><a href="/webgis.php" <?php if (strpos($url, "webgis.php")) { echo " class='active'"; } ?> id="gisnav">WEBGIS</a></li>
                    <li><a href="/documents.php" <?php if (strpos($url, "documents.php")) { echo " class='active'"; } ?> id="docsnav">DOCUMENTS</a></li>
                    <li><a href="/statistics.php" <?php if (strpos($url, "statistics.php")) { echo " class='active'"; } ?> id="statsnav">STATISTICS</a></li>
                    <li><a href="/support.php" <?php if (strpos($url, "support.php")) { echo " class='active'"; } ?> id="supportnav">SUPPORT</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

我认为问题出在margin: 0 auto; 或容器内的浮动元素上，但我不确定。

2）标题背景不再是我设置的蓝色渐变。我不确定为什么这不起作用，因为渐变在页面中间的 3 个<div> 中仍然有效。

这是我的标题 CSS

header {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);

    background-color:#007dc1;

    border:1px solid #124d77;

    color:#ffffff;
    font-size:13px;
    font-weight:700;
    padding:6px 24px;
    text-decoration:none;

    text-shadow:0px 1px 0px #154682;

    height: 50px;
    margin-bottom: 15px;
    text-align: center;
}

标题的 HTML 在问题 1) 中。

3) 我更改了 <hr> 的 CSS 以使其成为重复图像（对角线只有 3 个像素）。 IE8 似乎无法正确显示此图像。您可以在任何最新的浏览器中看到它应该是什么样子

这里是 CSS

hr {
    border: 0;
    background: url(/Images/tridots.png) 0 0 repeat-x;
    height: 5px;
    margin: 1em 0;
}

如果不能解决这个问题，那也没什么大不了的。我可以解决它

还有更多问题，但我希望在这些问题得到解决后他们会自行解决。提前感谢您的帮助！

【问题讨论】：

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

1.) 容器不工作，因为您在 DOCTYPE 声明之前有一个 html 注释。这是将 IE8 扔进quirks mode。

注意：w3c 验证器 (http://validator.w3.org) 会告诉您这一点，并会在您的页面上发现一些其他问题。 ;)

2.) IE8 不理解 html5 标签。您需要使用诸如 Modernizr 或 html5shiv （等）之类的东西。或者做一些像这样简单的事情：http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8。我想你会发现你的背景颜色出现了。

3.) 对此并不积极......但我认为上述内容也可以解决这个问题。

【讨论】：