<div>瀏覽器的“圓形”一致性，邊界半徑

Question

作為測試，我嘗試使<div>顯示為圓形。 <div>里面有一些文本，否則為空。

然后，在JavaScript中，我計算offsetWidth和offsetHeight ，使用兩者中的最大值，並將其分配給一個名為diameter的變量（盡管實際上寬度可能總是更大）。 我使用diameter來指定<div>的寬度，高度和borderRadius。 結果是看起來像一個圓圈（至少在Chrome，Firefox，Opera和Safari中。我尚未測試IE）。

在Chrome，Firefox，Opera和Safari中進行測試時，我注意到，當光標位於圓形區域之外但矩形區域內時，如果沒有border-radius ，則此行為對於CSS hover和JavaScript onmousedown會有所不同組。

光標位於該位置時的結果如下：

• Chrome： hover和onmousedown受到圈子外的影響
• Firefox： hover和onmousedown僅在圈子內受影響
• 歌劇： hover和hover onmousedown影響到圈子之外
• Safari： hover和onmousedown受影響

Firefox的行為是我一直希望使用的行為，是否有辦法使之成為可能？

編輯 ：如果找到解決方案，請解釋您使用的瀏覽器。

Answer 1

Chrome 30 Canary似乎已解決此問題。 因此，即將發布的Chrome和Opera版本（最近已切換到Chrome的渲染引擎）的行為應與Firefox相同。 IE10已經表現出這種方式。

Answer 2

您是否嘗試過使用CSS hacks，以便可以根據用戶使用的瀏覽器來設置特定的CSS類型。 這是一個提供解釋的網站：

http://www.paulirish.com/2009/browser-specific-css-hacks/

如果不是，這里是一個小提琴：

http://jsfiddle.net/rPtAV/6/

這是我使用的CSS：

.circle {
    padding: 20px;
    background: red;
    width: 20px;
    border-radius: 20000px;
    height: 20px;
}