Question

如果我删除border-radius属性，Chrome会将整个背景显示为灰色。当我添加border-radius时，页面背景变为白色。这只是Chrome / webkit特有的。在Firefox / Opera / IE中，页面在灰色背景下运行良好。有什么想法吗？

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

Answer 1

有趣的问题。 @Zlatev绝对是对的，您的样式可能应该是<div>和<html>标签中的<body>。

我试过玩它，我发现如果你把背景放在<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>

Webkit边界半径背景不当行为

1 个答案: