Chrome顯示不同的寬度

好吧我有10個div應該是所有75px寬1px邊框，使他們77px寬。我試圖將row1的寬度設置爲容納10個盒子所需的最小寬度。Chrome顯示不同的寬度

我的數學是如下

77px * 10 = 770px

2px的餘量右* 9 = 18像素

共788px

然而設置寬度時到788px，最後一個框溢出。經過進一步檢查，我注意到使用開發工具，框的寬度在77px（3次）和78px（7次）之間變化。

爲什麼箱子的大小不一樣，因爲這弄亂了我的數學。我使用的是Chrome，代碼在IE中正常工作。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> 
<script type="text/javascript" src="js/control.js"></script> 
</head> 
<body> 
<div class="board"> 
    <div class="row1"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
</div> 


</body> 
</html>

CSS

.body { font: 12px "helvetica neue", helvetica; 
} 
.board { 
    background: #EBEBE0; 
    padding: 10px; 
    width: 808px; 
} 
.row1 { 
    background: #FFDCDC; 
    height: 52px; 
    padding: 10px; 
    width: 788px; 
} 
.box { 
    width: 75px; 
    height: 50px; 
    border: 1px solid #000; 
    float: left; 
    margin: 0 2px 2px 0; 
} 
div.box:last-child { 
    margin-right: 0; 
}

JSFiddle

來源

2014-01-29 Elton Frederik

您是否重新設置了默認值？ –

不，我該怎麼做？我根本不知道違約。 –

看看這個http://www.cssreset.com/ – enyce12

嘿傢伙經過這段代碼的努力，我使出卸載Chrome並重新安裝它。現在問題解決了。

我想感謝大家的努力。

來源

2014-01-29 16:05:11

如果別人有同樣的問題，請接受你自己的回答 - 它應該能夠幫助你更快地表明你的情況有什麼幫助。堆棧溢出。 – pwdst

此行爲可能是因爲格之間的空間發生。

試試這個：

<div class="board"> 
    <div class="row1"><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
     --><div class="box"></div><!-- 
    --></div> 
</div>

來源

2014-01-29 12:19:45 Happy

還沒有工作嗯奇怪。 –

所提到的問題僅適用於具有'display：inline-block'的元素......這裏不是這種情況。 –

我無法重現該問題要麼...

我複製並粘貼你的代碼，它似乎也給我。您是否嘗試過創建空白文檔（.html）並粘貼您在此處放置的代碼以檢查是否也出現此問題？

另一個問題是：什麼是在JavaScript文件？難道它不能改變你的風格嗎？也許像$(div).css('margin', '10px')（僅舉例）。

來源

2014-01-29 15:10:27

沒有JS目前是空的。我確實創建了一個空白的html文檔，但問題仍然存在。 –

您是否可以向我們發送在Chrome瀏覽器中運行的代碼圖片，並打開Developer Tools？ –

http://snag.gy/HG9E0.jpg –

Chrome顯示不同的寬度

回答

相關問題