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边框半径背景不当行为

回答

相关问题