这是我的代码[非常简单的代码，但无法破解]。对这些东西很陌生。因为我总是使用固定宽度，所以我没有遇到任何问题。但我真正的问题是为什么会有不同浏览器占用的宽度差异巨大。
<!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。
最佳答案
Safari 和 Chrome 将对所有元素的宽度/高度/边距/填充等进行一些默认设置。 CSS 重置是一个将所有这些设置为标准的文件，因此它们在所有浏览器中都是相同的。在您的示例中，我认为它是 ul 或 li 标记或类似标记上的填充。
您可以将 CSS Reset 放回去，或者使用类似 http://necolas.github.io/normalize.css/ 的东西，这被普遍认为是 CSS 重置的最佳现代替代方案。
关于html - 与 safari 相比，Chrome 浏览器呈现不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21625665/