2014-02-07 253 views
0

時呈現不同的這是我的代碼[代碼非常簡單,但無法破解它] .AM非常新的這些things.As我一直使用固定的寬度,我沒有得到任何問題。但我真正的問題是爲什麼不同瀏覽器佔用的寬度有很大差異。Chrome瀏覽器相比,Safari瀏覽器

<!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.Why鉻不使用全width.And也正在使用重置的CSS stylesheet.But有與Firefox沒有問題。

這裏是樣式表[沒什麼太大。

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

From Chrome Browser

From safari Browser

我不知道錯了我該做的事情是它是與重置CSS樣式表我註釋掉和嘗試,但同樣result.But只使用1147.642寬度和8px的邊緣在鉻和1264寬度和8px在safari。

回答

0

Safari和Chrome將有寬/高/利潤率/所有元素補白等一些默認設置。 CSS重置是一個將所有這些設置爲標準的文件,因此它們在所有瀏覽器中都是相同的。在您的例子我認爲其對ulli標籤的墊襯,或類似的東西。

您可以將CSS Reset重置回來,或者使用類似http://necolas.github.io/normalize.css/之類的東西,它通常被認爲是CSS復位的最佳現代替代品。

相關問題