Chrome 中的边框半径/溢出问题

发布于 2024-12-06 07:39:58 字数 505 浏览 2 评论 0原文

我有一个网站使用大量边框半径进行布局。这个问题与下面的屏幕截图中的工作版本（Firefox）进行了比较（而且我也没有设计这个可怕的东西）。

在此处输入图像描述

所有代码都遵循相同的边框半径格式：

border-top-left-radius: 25% 54%;
border-bottom-left-radius: 19% 54%;

我唯一能看到的是灰色框（ "main_area") border-radius 实际上是由父级控制的，所以灰色背景可能溢出了。

这是链接

另请注意 Opera 中也会出现相同的错误。我没有使用前缀，只是使用上面的CSS。 IE9 中的布局也很好。

谢谢

原文

I have a site that uses a lot of border-radius for layout. The issue is compared to a working version (Firefox) in the screenshot below (also I did NOT design this awful thing).

enter image description here

All the code follows the same format for border radius:

border-top-left-radius: 25% 54%;
border-bottom-left-radius: 19% 54%;

The only thing I can see is the grey boxes ("main_area") border-radius is actually controlled by a parent, so maybe the grey background is overflowing.

Here is the link

Also note the same error occurs in Opera. I am not using prefixes, just the above css. The layout is also fine in IE9.

Thanks

分享到QQ

分享到微博

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

发布评论

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

花落人断肠 2024-12-13 07:39:58

百分比尺寸是根据默认字体大小计算的，因此请使用重置样式表或将浏览器特定的字体大小添加到使用百分比的选择器，例如：

div#container > #main > #main_area > .content > .holder {
  font-size: 10px;
}

/* Firefox reset */
@-moz-document url-prefix() {
    div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    }
}

/* IE9 reset */
@media all and (monochrome: 0) { 
   div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    } 
}

Percentage dimensions are calculated based on the default font-size, so use a reset stylesheet or add browser specific font-sizes to the selectors which use percentages, such as:

div#container > #main > #main_area > .content > .holder {
  font-size: 10px;
}

/* Firefox reset */
@-moz-document url-prefix() {
    div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    }
}

/* IE9 reset */
@media all and (monochrome: 0) { 
   div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    } 
}

回复收藏 0 原文

~没有更多了~