Question

这是我的代码[非常简单的代码但不能破解它]。对这些东西非常新。因为我总是使用固定宽度而我没有得到任何问题。但我真正的问题是为什么有不同浏览器占用的宽度差异很大。

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

From Chrome Browser

From safari Browser

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

Answer 1

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

您可以重新插入CSS重置，或使用类似http://necolas.github.io/normalize.css/的内容，这通常被认为是CSS重置的最佳现代替代品。

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

1 个答案: