与 safari 相比，Chrome 浏览器的呈现方式不同答案

【问题标题】：Chrome browser rendering differently when compared to safari与 safari 相比，Chrome 浏览器的呈现方式不同
【发布时间】：2014-02-20 20:59:06
【问题描述】：

这是我的代码[非常简单的代码，但无法破解]。我对这些东西非常陌生。因为我一直使用固定宽度，我没有遇到任何问题。但我真正的问题是为什么会有不同浏览器占用的宽度差异很大。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flip Transition</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style1.css">
</head>
<body>
<ul>

    <li>
    <div class="front">1</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">2</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">3</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">4</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">5</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">6</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">7</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">8</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

</ul>

</body>
</html>

在 safari 中它使用 1280*0 的分辨率，但在 chrome 中它只使用 1163.636*0。为什么 chrome 没有使用全宽。而且我也在使用重置 css 样式表。但是 firefox 没有问题。

这是样式表[没什么]。

li{
    list-style-type: none;
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}

我不知道我做错了什么与我注释掉并尝试但结果相同的重置 css 样式表有关。但在 chrome 中仅使用 1147.642 宽度和 8px 的边距，在 safari 中仅使用 1264 宽度和 8px。

【问题讨论】：

标签： html google-chrome safari css-reset

【解决方案1】：

Safari 和 Chrome 将为所有元素的宽度/高度/边距/填充等设置一些默认设置。 CSS 重置是一个将所有这些设置为标准的文件，因此它们在所有浏览器中都是相同的。在您的示例中，我认为它是 ul 或 li 标签上的填充，或类似的东西。

您可以重新设置 CSS 重置，也可以使用 http://necolas.github.io/normalize.css/ 之类的东西，这通常被认为是 CSS 重置的最佳现代替代方案。

【讨论】：