Webkit邊框半徑背景不當行爲

如果我刪除border-radius屬性，Chrome會將整個背景顯示爲灰色。當我添加邊框半徑時，頁面背景變成白色。這只是Chrome/webkit特定的。該頁面可以在Firefox/Opera/IE中隨處使用灰色背景。任何想法爲什麼？Webkit邊框半徑背景不當行爲

http://devio.us/~hara/test.html

來源

2012-02-06 iphar

分配樣式如「寬度」與html元素通常不是一個好主意。而是將它們應用到body元素或最好的包裝div – Zlatev 2012-02-06 22:02:18

非常感謝！應用包裝或使用body元素可以解決問題。 – iphar 2012-02-06 22:18:09

有趣的問題。 @ Zlatev絕對是對的，你應該在<html>和<body>標籤內將<div>設爲你的樣式。

我試着玩了，我發現，如果你把背景上<body>標籤仍然溢出來填滿整個頁面，但是如果你指定<body>標籤的背景，然後<html>標籤申報有不同的背景（比如說白色），看起來就像你期待的那樣。

<!doctype html> 
<head> 
<link rel="shortcut icon" type="image/x-icon" href="faviconNoFap.ico" /> 
<style type="text/css"> 
html { 
    background: white; 
} 
body { 
    width: 760px; 
    margin: 55px auto 0 auto; 
    border: solid 1px; 
    font-family: Hoefler; 
    background: #e4e4e4; 

} 
h2 { 
    margin-top: 0.5em; 
    border-bottom: dotted 1px; 
    font-family: Helvetica, sans-serif; 
} 

</style> 
<title>Test title of a test web-page</title> 
</head> 
<body> 

<h2>Heading Heading Heading Heading</h2> 

<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 


<h2>Heading Heading Heading Heading</h2> 

<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 
<p>Text text text text text text text text text.</p> 



</body> 
</html>

來源

2012-02-06 22:16:17 Andrew

Webkit邊框半徑背景不當行爲

回答

相關問題