Webkit border-radius 背景不当行为

发布于 2025-01-02 15:15:44 字数 238 浏览 0 评论 0原文

如果我删除 border-radius 属性，Chrome 会以灰色显示整个背景。当我添加边框半径时，页面背景变成白色。这仅是 Chrome/webkit 特有的。该页面在 Firefox/Opera/IE 中的任何地方都可以正常使用灰色背景。有什么想法吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

汐鸠 2025-01-09 15:15:44

有趣的问题。 @Zlatev 绝对是对的，您可能应该将样式设置为和标记内的

。

我尝试使用它，发现如果您将背景放在标记上，它仍然会溢出以填充整个页面，但是如果您指定 的背景 标记，然后声明标记以具有不同的背景（例如白色），看起来就像您希望的那样。

<!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>

Interesting problem. @Zlatev is definitely right, you should probably your styles to a <div> within the <html> and <body> tags.

I tried playing around with it, and I found that if you put the background on the <body> tag it still overflows to fill the entire page, however if you specify the background for the <body> tag and then declare the <html> tag to have a different background (say, white), it look like you were hoping it would.

<!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>

回复收藏 0 原文

~没有更多了~