Chrome/WebKit在使用背景，边框半径和顶部/底部边框时创建实心条 [英] Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders

问题描述

Google Chrome使用边框半径，背景颜色以及顶部和底部边框来处理越野车.这里是复制的证据和代码:

Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce:

http://jsfiddle.net/6ADtd/4/

<div></div>​

div {
  background:blue;
  border-top:10px solid red;
  border-bottom:10px solid red;
  border-radius:20px 20px 0 0;
  height:100px;
  /*
  border-right:1px solid transparent;
  */
}

border-right:1px solid transparent;是注释中建议的一个技巧，它确实有助于删除不需要的中间实心条，但是当您调整大小时，窗口/浏览器-再次出现.它与元素与浏览器窗口边缘的接近程度有关，我不太了解.您必须调整大小，然后有时将鼠标悬停在元素上. 我桌面上的视频:

The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser - it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can't quite understand it. You have to resize then hover over the element sometimes. ​ Videos from my desktop:

• http://www.screenr.com/6wU8 (无边框)
>
• http://www.screenr.com/NVU8 (带有右边框)
>

• http://www.screenr.com/6wU8 (without border-right)
• http://www.screenr.com/NVU8 (with border-right)

我在多个属性上尝试使用-webkit-前缀，但无法修复.

I've tried -webkit- prefixes on several properties and was unable to fix it.

我之所以先发布此内容，是因为我需要快速修复特定网站，但现在我注意到它出现在多个网站上，并且已经确定了造成该问题的原因.这就是我在Firefox之外不进行任何测试的结果.这可能是一个错误，我应该报告它，但是与此同时，我仍然需要修复.

I first posted this because I needed a quick fix for a specific website, but now I'm noticing it show up on several sites and I've nailed down what causes it. That's what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I'm still stuck in need of a fix in the meantime.

理想的解决方案是使用CSS，因此我可以在CSS文件中编写一个或两个选择器来进行修复，而不必在加载模板文件和数据库中进行挖掘以应用div-wrap或其他标记修复程序.有人知道有什么技巧可以摆脱此错误吗?

The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?

推荐答案

在我调查此问题时，仍然存在问题

At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:

我使用的解决方案"是同时应用两者

The "solution" I used was to apply both

border-left:1px solid transparent;
border-right:1px solid transparent;

使用开发人员工具

到#header-这似乎迫使问题消失，无论大小如何，至少在Mac Chrome 18上都是如此.

to #header with developer tools - this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.

在我看来，这似乎是越野车的行为-我推测这与混合颜色相交的角有关，由于错误，最终会渗入元素本身.

This seems like buggy behaviour to me - I'd speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.

我试图，毫无结果地研究边界半径大于导致这种行为的边界宽度的可能连接.当然，这是不正确-使用不同的x-/y半径不会产生任何结果而不应用上面的解决方案".很高兴知道我猜到.

I've attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue - playing around with different x-/y-radii yielded no results without having the "solution" from the above applied. Good to know I guess.

这篇关于Chrome/WebKit在使用背景，边框半径和顶部/底部边框时创建实心条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！