Firefox添加額外的1px來阻止具有邊界半徑的元素

奇怪的是，自從最近以來（也許是自更新以來）Firefox（16.0.1）爲我提供了額外的白色或空白像素行，半徑設置。Firefox添加額外的1px來阻止具有邊界半徑的元素

我已經嘗試修改很多屬性，如行高，溢出等等，但似乎沒有任何工作，並且對於其他奇怪的原因，我無法在我渲染的框架之外重現問題這些按鈕。但是，我曾嘗試禁用CSS重置我使用，我曾嘗試禁用外圍CSS中的某些其他值，使用Firebug，但無濟於事。

，因爲我不知道如何重現它，我已經把一個圖形演示該問題：

Demonstration of Problem

有沒有人遇到過這個問題，並意識到可能修復？

編輯：我現在也注意到其他元素也混亂了。這絕對是一個新的發展。即使輸入看起來不正確，併爲它們設置行高，也不會影響結果。查看更多圖片：

Additional Graphic

這裏是第二圖形觀察輸入字段的CSS樹：

.dynamicForm-componentEdit .componentLabel input.long { 
    width: 320px; 
} 

.dynamicForm-componentEdit .componentSettings textarea, .dynamicForm-componentEdit .componentLabel textarea, .dynamicForm-componentEdit .componentSettings input, .dynamicForm-componentEdit .componentLabel input { 
    background: -moz-linear-gradient(center top , #FFFFFF 0%, #FAFAFA 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #CDCDCD; 
    border-radius: 6px 6px 6px 6px; 
    color: #666666; 
    font-size: 10px; 
    height: 12px; 
    line-height: 20px; 
    margin-bottom: 4px; 
    margin-right: 8px; 
    margin-top: 4px; 
    padding: 2px 6px; 
    width: 130px; 
} 
input { 
    font-family: Helvetica,Arial,Verdana; 
    outline: 0 none; 
} 
* { 
    margin: 0; 
    padding: 0; 
} 
.dynamicForm-componentEdit { 
    color: #AAAAAA; 
} 
.interfaceBlock-content { 
    color: #666666; 
    font-family: Verdana; 
    font-size: 11px; 
} 
body { 
    color: #333333; 
    font-family: Helvetica,Arial,Verdana,Geneva; 
    font-size: 13px; 
    font-weight: 500; 
    line-height: 16px; 
    color: #000000; 
    font-size: 100.01%; 
    text-align: left; 
}

編輯＃2：這個問題似乎涉及到CSS3漸變。

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 transparent;

到：我從改變CSS

background: none repeat scroll 0 0 #DDDDDD;

看到這個圖形：

Graphic Number 3

使用正常的背景時，問題就消失了！

來源

2012-10-28 SquareCat

請張貼足夠的CSS，至少嘗試複製的問題。 –

這裏是你的圖像的CSS使用'button'：http://jsfiddle.net/h7MAB/顯然，它看起來不一樣;對我來說，'line-height'看起來不對（應該是'10px'？有沒有顯示其他風格屬性應用？ –

我正要發佈一些更多的CSS代碼 - 我會先嚐試上述建議。編輯：這個問題絕對不是由一個特定的邊界半徑造成的，我嘗試了8px，也嘗試了不同的高度，無濟於事 - 我會在一分鐘內發佈更多的CSS。 – SquareCat

我能夠通過應用來解決這個問題：

background-clip: padding-box

到受到該問題影響的所有元素。

我不確定這是否是最好的方法，但它絕對有效。問題是所有的漸變定義都會覆蓋這個設置 - 例如它不能只適用於所有的DIV。因此

一個正確的定義是這樣的：

background: -moz-linear-gradient(center top , #F7F7F7 0%, #E5E5E5 100%) repeat scroll 0 0 padding-box transparent;

如果任何人能想到一個更優雅和有效的辦法，請隨時發表評論或回答。

編輯：經過進一步的研究，我發現，填充盒並解決所描述的渲染問題，但整個問題發生的，因爲別的事情，似乎影響到墊襯這就是爲什麼在輸入字段中的文本（見上面的圖形＃2）沒有垂直居中（因爲它應該是）。

終於讓我找到了罪魁禍首 - 我不明白爲什麼它是一個在所有：黑體

一旦我切換到宋體，所有的問題都簡單了。

那麼必須是字體渲染問題，或者字體指標中的某些東西會使Firefox的渲染器混淆？

來源

2012-10-28 17:28:55 SquareCat

我不能完全想到那個財產被稱爲什麼（我認爲這是一個「邊界」屬性）。 –

爲我解決了另一個問題，在FF中使用'border-radius'的角落被渲染錯誤https://dl.dropboxusercontent.com/u/6981682/chromevsfirefox.png – manu

我的最後一個答案已被刪除，我認爲這是因爲我在另一個任務中給出了同樣的問題，其中有同樣的問題。所以，如果你想看看我是如何解決這個問題，那麼看到答案在這裏：https://stackoverflow.com/a/13273215/1806644

來源

2012-11-08 09:11:03 Donpa

這應該是一條評論。 – SquareCat

Firefox添加額外的1px來阻止具有邊界半徑的元素

回答

相關問題