«круг» согласованность браузера, граничный радиус

Question

В качестве теста я попытался сделать <div> появлением в виде круга. У <div> есть текст внутри, но в остальном он пуст.

Тогда в JavaScript Я вычислить offsetWidth и offsetHeight, использовать максимум два, и присвоить его переменной с именем diameter (хотя реально ширина, вероятно, всегда будет больше). Я использую diameter, чтобы назначить <div> его ширину, высоту и borderRadius. Результат - это что-то похожее на круг (по крайней мере, в Chrome, Firefox, Opera и Safari. Я не тестировал IE).

Тестирование в Chrome, Firefox, Opera и Safari, я заметил, что это ведет себя по-разному для CSS hover и JavaScript onmousedown когда курсор находится в непосредственной близости от площади круга, но внутри области прямоугольника, который будет виден, если border-radius не было установлено.

Вот результаты, когда курсор находится в этом месте:

• Chrome: hover и onmousedown влияние вне круга
• Firefox: hover и onmousedown только затрагиваемой внутри круга
• оперы: hover и onmousedown пострадавших за пределами круга
• Сафари: hover и onmousedown пострадавших на улице e circle

Поведение Firefox - это тот, который я хотел бы последовательно использовать, есть ли способ сделать это возможным?

Редактировать: Если вы нашли решение, объясните, что браузер вы используете.

Answer 1

Кажется, что эта проблема уже исправлена ​​в Chrome 30 Canary. Поэтому предстоящие выпуски Chrome и Opera (которые недавно переключились на механизм рендеринга Chrome) должны вести себя так же, как Firefox. IE10 уже ведет себя таким образом.

Answer 2

Вы пробовали использовать css-хаки, чтобы вы могли устанавливать определенные типы css в зависимости от используемого вами браузера. Вот сайт, который дает объяснение:

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

Если не здесь скрипку окружности:

Вот CSS, который я использовал:

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