邊界半徑行爲不正確

Question

在FF中，這個邊界半徑似乎不想工作。 Editable鏈接這裏。

大方塊的右半徑應爲0px，小方塊的左側應爲0加入它們。

HTML：

<fieldset class="error"> 
    <input id="product__79_specField_8" name="specField_8" class="text " autocomplete="" type="text" value=""/> 
    <input type="image" src="upload/orng_bg_arrow"upload/id="product__specfield_8_arrow" value=""></input> 
    <div class="errorText hidden"></div> 
</fieldset> 

CSS

#product__79_specField_8, 
#product___specField_8 { 
    background-color:#ffa105; 
    width:194px; 
    height:33px; 
    border: 1px solid #dddddd; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-bottom-right-radius:0px; 
    border-top-right-radius:0px; 
    -moz-border-bottom-right-radius:0px; 
    -moz-border-top-right-radius:0px; 
    -webkit-border-bottom-right-radius:0px; 
    -webkit-border-top-right-radius:0px; 
    font-weight:bold; 
    font-size:24px; 
    padding-left:55px; 
    float:left; 
} 

#product__specfield_8_arrow { 
    background-color:#ffa105; 
    width:50px; 
    height:33px; 
    border: 1px solid #dddddd; 
    border-left:none; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-bottom-left-radius:0px; 
    border-top-left-radius:0px; 
    -moz-border-bottom-left-radius:0px; 
    -moz-border-top-left-radius:0px; 
    -webkit-border-bottom-left-radius:0px; 
    -webkit-border-top-left-radius:0px; 
    margin:0; 
    padding:2px; 
} 

Answer 1

不幸的是，CSS屬性的形式的WebKit和Mozilla之間變化。

對於Firefox，你想：

-moz-border-radius-bottomright: 
-moz-border-radius-bottomleft: 
-moz-border-radius-topright: 
-moz-border-radius-topleft: 

對於Safari瀏覽器Chrome的&你想：

-webkit-border-top-left-radius:  
-webkit-border-top-right-radius: 
-webkit-border-bottom-left-radius: 
-webkit-border-bottom-right-radius: 

你似乎有：

-moz-border-bottom-right-radius:0px; 
-moz-border-top-right-radius:0px; 

這是無效的。

Answer 2

-moz-border-radius-topright: 0px

http://www.css3.info/preview/rounded-border/

Answer 3

你的聲明是有點過，Mozilla的風格應該是這樣的：

#product___specField_8 { 
    -moz-border-radius-bottomright:0px; 
    -moz-border-radius-topright:0px; 
} 

#product__specfield_8_arrow { 
    -moz-border-radius-topleft:0px; 
    -moz-border-radius-bottomleft:0px 
} 

For a good equality comparison across all 3, look here

Answer 4

解決方案：

-moz-border-radius:5px 10px 150 20px; 
-webkit-border-radius:5px 10px 150 20px; 
border-radius:5px 10px 150 20px; 

這裏，
5px的是左上角，
10px的是右上角，
15px的是右下角，
20px的是左下角。