CSS不能在Chrome（Linux和Windows）工作

我有这样的代码：CSS不能在Chrome（Linux和Windows）工作

<style type="text/css"> 
div { 
margin: 100px auto; 
width: 0px; 
height: 0px; 
border-right: 30px solid transparent; 
border-top: 30px solid red; 
border-left: 30px solid red; 
border-bottom: 30px solid transparent; 
border-top-left-radius: 30px; 
border-top-right-radius: 30px; 
border-bottom-left-radius: 30px; 
border-bottom-right-radius: 30px; 
position: relative; 
} 
</style> 
<div></div>

产生：

haflcircle

在Firefox

，

但在铬（Linux的，和Windows - 没有尝试在Mac）我看不出为什么？

来源

2012-02-20 rcs20

我相信这实际上是某种错误。如果您将高度和宽度更改为1px，它适用于我。不幸的是，这会留下一个小白点，但可以通过将背景更改为红色并将背景剪辑更改为内容来解决该问题。

JSFiddle example.

来源

2012-02-20 15:12:55

哦谢谢，它现在的工作 – rcs20 2012-02-20 15:16:03

看起来像一个错误。如果你摆脱了边界半径，它会显示一个三角形很好。 – 2012-02-20 18:56:26

我会补充一点，浏览器开发人员可能会认为这不是一个错误。我之前遇到过这个问题，我的结论是，为了有一个“border-radius”，元素应该至少为1px。有一种数学方法来计算和渲染“border-radius”。如果高度/宽度为0的东西的边界半径被允许，则用于渲染的数学计算将被限制。 – Brian 2012-03-03 22:26:26

因为你给了0像素的宽度和高度0像素到div，所以你什么也看不到。

width: 0px; 
height: 0px;

改变这一点，希望它是可见的。

来源

2012-02-20 15:15:22

宽度和高度为0的元素仍然可见（以及它们的边界是）。我一直使用CSS箭头。这个特殊情况似乎是Chrome的一部分渲染错误。 – 2012-02-20 15:18:06

谢谢，但是当我使用宽度和高度为0px的div，并且如果div不包含任何内容（文本或其他任何内容），那么我什么都看不到。 – 2012-02-20 15:23:22

CSS不能在Chrome（Linux和Windows）工作

回答

相关问题