[英]<div> “circle” browser consistency, border-radius
As a test I tried making a <div>
appear as a circle. 作为测试,我尝试使
<div>
显示为圆形。 The <div>
has some text inside of it but otherwise is empty. <div>
里面有一些文本,否则为空。
Then in JavaScript I calculate the offsetWidth
and offsetHeight
, use the maximum of the two, and assign it to a variable named diameter
(although realistically the width would probably always be larger). 然后,在JavaScript中,我计算
offsetWidth
和offsetHeight
,使用两者中的最大值,并将其分配给一个名为diameter
的变量(尽管实际上宽度可能总是更大)。 I use diameter
to assign the <div>
its width, height, and borderRadius. 我使用
diameter
来指定<div>
的宽度,高度和borderRadius。 The result is something that looks like a circle (at least in Chrome, Firefox, Opera, and Safari. I have not tested IE). 结果是看起来像一个圆圈(至少在Chrome,Firefox,Opera和Safari中。我尚未测试IE)。
Testing in Chrome, Firefox, Opera, and Safari I noticed that this behaves differently for CSS hover
and JavaScript onmousedown
when the cursor is just outside the area of the circle but inside the area of the rectangle that would be visible if border-radius
was not set. 在Chrome,Firefox,Opera和Safari中进行测试时,我注意到,当光标位于圆形区域之外但矩形区域内时,如果没有
border-radius
,则此行为对于CSS hover
和JavaScript onmousedown
会有所不同组。
Here's the results when the cursor is in that spot: 光标位于该位置时的结果如下:
hover
and onmousedown
affected outside the circle hover
和onmousedown
受到圈子外的影响 hover
and onmousedown
only affected inside the circle hover
和onmousedown
仅在圈子内受影响 hover
and onmousedown
affected outside the circle hover
和hover
onmousedown
影响到圈子之外 hover
and onmousedown
affected outside the circle hover
和onmousedown
受影响 The behavior Firefox has is the one I'd like to consistently use, is there a way to make this possible? Firefox的行为是我一直希望使用的行为,是否有办法使之成为可能?
Edit : If you find a solution please explain what browser you are using. 编辑 :如果找到解决方案,请解释您使用的浏览器。
It seems that this issue is already fixed in Chrome 30 Canary. Chrome 30 Canary似乎已解决此问题。 So the upcoming releases of Chrome and Opera (which has recently switched to Chrome's rendering engine) should behave the same way as Firefox.
因此,即将发布的Chrome和Opera版本(最近已切换到Chrome的渲染引擎)的行为应与Firefox相同。 IE10 already behaves this way.
IE10已经表现出这种方式。
Have you tried using css hacks so that you can set specific css types depending on the Browser that the user is using. 您是否尝试过使用CSS hacks,以便可以根据用户使用的浏览器来设置特定的CSS类型。 Here is a site that gives an explanation:
这是一个提供解释的网站:
http://www.paulirish.com/2009/browser-specific-css-hacks/ http://www.paulirish.com/2009/browser-specific-css-hacks/
If not here is a fiddle of a circle: 如果不是,这里是一个小提琴:
http://jsfiddle.net/rPtAV/6/ http://jsfiddle.net/rPtAV/6/
Here is the css that I used: 这是我使用的CSS:
.circle {
padding: 20px;
background: red;
width: 20px;
border-radius: 20000px;
height: 20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.