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）工作

回答

相關問題