CSS - WebKit表格單元顯示100％缺少1個像素的寬度？

我有一個圖像覆蓋寬度爲100％，覆蓋顯示爲table-cell，不幸的是100％的寬度似乎是所有WebKit瀏覽器的100％減1像素。任何想法爲什麼會發生，以及如何解決它？CSS - WebKit表格單元顯示100％缺少1個像素的寬度？

這裏的HTML：

<ul class="portfolio"> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    </ul>

和CSS：

body { 
    background: #222; 
} 

.portfolio li { 
    display: inline-block; 
    background: #fff; 
    width: 19%; 
    margin: 1% 2%; 
    height: 100px; 
} 

.image { 
    position: relative; 
    text-align: center; 
    overflow: hidden; 
    background: green url('http://cool-iphonewallpapers.com/download/green-background.jpg') center center no-repeat; 
    height: 100px; 
} 

.overlay { 
    display: table; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
} 

.overlay:hover { 
    background: #000; 
} 

.button { 
    display: table-cell; 
    vertical-align: middle; 
}

和示範代碼，看起來在Firefox & IE罰款，並在Chrome /歌劇車（使用眨眼拉斯特版本）。注意在每個.overlay的右側的1個像素間隙：

http://jsbin.com/afAmIhO/1/

來源

2013-10-26 Wordpressor

我認爲這是Chromium項目中的一個錯誤。我無法在Mac上的Safari 7.0（9537.71）上覆制此內容。也許你應該向[Chromium項目]提交bug（https://code.google.com/p/chromium/issues/list） –

正如Tyler Eich所述，Chromium中存在一個bug。嘗試將類重疊更改爲寬度：100.9％。 –

好的，謝謝，任何想法需要多長時間才能解決？這是100.9％的寬度技巧安全（不會導致舊版瀏覽器混亂）？ @SpencerLeonard，用100.9％的想法回答這個問題，所以我能夠接受是一個答案。 – Wordpressor

這裏是您的情況下可接受的劈：

HTML：

<ul class="portfolio"> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div> </div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    <li><a href="#"><div class="image"><div class="overlay"><div class="button">+</div></div></div></a></li> 
    </ul>

CSS：

body { 
    background: #222; 
} 
.portfolio li { 
    display: inline-block; 
    background: #fff; 
    width: 19%; 
    margin: 1% 2%; 
    height: 100px; 
} 
.image { 
    position: relative; 
    text-align: center; 
    overflow: hidden; 
    background: green url('http://cool-iphonewallpapers.com/download/green-background.jpg') center center no-repeat; 
    height: 100px; 
} 
.overlay { 
    display: table; 
    width: 100.9%; /*Hack */ 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
}

.overlay：hover { backgro und：＃000; } .button {display：table-cell; vertical-align：middle; }

來源

2013-10-27 18:35:34

CSS - WebKit表格單元顯示100％缺少1個像素的寬度？

回答

相關問題