奇怪的邊框渲染

我有一個包含一個表的頁面。奇怪的邊框渲染

<tr>的有border-bottom: 1px dotted black;，但正如你從下面的圖片中可以看到的，它們渲染的很奇怪。有誰知道這可能是爲什麼？

enter image description here

相關CSS

.basket-item{ 
    border-bottom: 1px dotted black; 
    border-top: 1px dotted black; 
    padding: 10px 0; 
} 

.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row 
    padding: 25px; 
    vertical-align: top; 
    text-align: left; 
}

HTML結構是一個標準表，<tr>的有一類.basket-item

預先感謝任何幫助

來源

2013-04-18 Bill

我已經看到這個表格的渲染問題。沒有表的佈局可能在這裏工作。一般來說，避免使用表格進行佈局。表格用於數據。 –

此表用於顯示錶格數據。不過謝謝。 – Bill

如果你可以提供一個[fiddle]（http://jsfiddle.net），那將會很好，因爲在你的頁面上調試並不容易......無論如何，這看起來像是Chrome（或者WebKit）問題。我沒有注意到Firefox中的效果。對於Chrome，您可以將'h4'更改爲'margin-bottom：1.5em'。 – Passerby

從註釋擴展：

這個問題似乎只/主要影響瀏覽器（或WebKit的），以及一些不成功的試用後，我終於想出了這一點：

添加

h4 { 
    margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */ 
}

這樣做的原因是，您所指定

font-size: 14px;

和Chrome有一個內部的CSS，看起來像：

h4 { 
    -webkit-margin-before: 1.33em; /* works like margin-top */ 
    -webkit-margin-after: 1.33em; /* works like margin-bottom */ 
}

，使一個浮點數像素（14 * 1.33 = 18.62），以及（可能低於其它元素，尤其是float: left元素），Chrome瀏覽器似乎有需要以「計算」「佔位符」的剩餘空間高度，最後以「非常接近200px」的浮點數結束。

觀察：

在我的Chrome中，<td>應該是250像素高度（包括padding）。這<td>有padding: 25px，所以「內部高度」應該是200px，但默認風格，在開發工具，瀏覽器顯示，<td>實際上199.609375px高度。將h4的margin-bottom覆蓋爲一個整數，將內部高度「歸一化」回200px。

來源

2013-04-22 03:14:34 Passerby

+1！感謝您在答案中的提示，它解決了我遇到的一個不同的問題，即Chrome正在剪裁我正在顯示的「canvas」（可動態調整大小）的底部邊界。添加一個'邊緣底部'做了訣竅。 – miqid

這是顯然是桌面顯示;如果您將td或tr更改爲另一個顯示器（如inline-block），它會消失，但佈局已損壞。它也似乎取決於視口的縮放級別：如果向上擴展，可以使奇怪的邊框消失（頂部和底部邊框）：tr和td的高度有時會從250px切換到251px。

有這麼幾個信息，我不能推導出另一個參數改變。

如果沒有任何實際解決方案，請考慮更改您的顯示類型（tr或td），並根據您的要求調整佈局。

來源

2013-04-18 11:27:53 Bigood

奇怪的邊框渲染

回答

相關問題