开发者

Firefox Border Radius Not Showing

开发者 https://www.devze.com 2023-01-02 07:59 出处:网络
I am using the following css #helper{ position:absolute; bottom:0; width:100%; } #key{ width:950px; margin:0 auto;

I am using the following css

#helper{
position:absolute;
bottom:0;
width:100%;
}

#key{
width:950px;
margin:0 auto;
z-index:2;开发者_运维技巧
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}


<-- inside body -->
<div id="helper">
<div id="key">SHould be rounded top corners?</div>
</div>

Yet in Firefox it is not showing after refresh. Any ideas where should I be looking first? Thanks


Specify a background or border for the #key element?


key{

width:950px;
margin:0 auto;
z-index:2;
border:1px solid #000;
background-color:#F00;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}

you should use border or background for this.


Nice Question Harry;

It maybe cause we add two lines. Firefox 14 may likes all four corners in css.

Replace 2 lines
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;

with 4 lines
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

for your example:

key

{
width:290px;
margin:0 auto;
border:4px solid #000;
ackground-color:#EE7621;
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
padding:5px 0 0 15px;
}

jsfiddle example:
http://jsfiddle.net/ccatto/7zAXC/

We could also use the css as a class and id: http://jsfiddle.net/dFTMh/.

Thx;

0

精彩评论

暂无评论...
验证码 换一张
取 消