Webkit边框半径背景不当行为答案

【问题标题】：Webkit border-radius background misbehaviorWebkit边框半径背景不当行为
【发布时间】：2012-02-28 09:17:42
【问题描述】：

如果我删除了border-radius 属性，Chrome 会将整个背景显示为灰色。当我添加边框半径时，页面背景变为白色。这只是 Chrome/webkit 特定的。该页面在 Firefox/Opera/IE 中随处可见灰色背景。任何想法为什么？

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

【问题讨论】：

为 html 元素分配诸如 'width' 之类的样式通常不是一个好主意。而是将它们应用于 body 元素或最好的包装 div
非常感谢！应用包装器或使用 body 元素可以解决问题。

标签： webkit css

【解决方案1】：

有趣的问题。 @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>

【讨论】：