0

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

<!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;
}

从 Chrome 浏览器

从 Safari 浏览器

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

4

1 回答 1

0

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

您可以将 CSS 重置放回原处，或者使用http://necolas.github.io/normalize.css/之类的东西，这通常被认为是 CSS 重置的最佳现代替代品。

于 2014-02-20T12:59:06.147 回答