當使用jquery設置CSS寬度時邊框半徑發生變化

Question

我遇到的問題是<div/>的border-radius在通過jQuery應用css width屬性時被刪除。具有半徑的<div/>也裁剪爲位於<div/>的absolute。我已經包括下面的例子：

http://jsfiddle.net/SLvBZ/2/

下面是一個類似的例子在那裏工作的推特（登錄前）： https://twitter.com/welcome/recommendations

瀏覽器版本：Chrome瀏覽器26.0.1410.65

#SuggestProgressContainer { 
    height: 27px; 
    float: left; 
    margin: 4px 20px 0 0; 
    position: relative; top: 0; left: 0; 
    width: 247px; 
    overflow: hidden; 

    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

#SuggestProgressBar { 
    width: 247px; 
    height: 27px; 
    background: #c6c6c6; 
    border: 1px solid #bfbfbf; 
    position: absolute; top: 0; left: 0; 
} 

#SuggestProgress { 
    height: 100%; 
    width: 50px; 
    position: absolute; top: 0; left: 0; 
    border: 1px solid #068CE1; 
    background: #0F93E7; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1)); 
    background: -webkit-linear-gradient(top, #1c9dee, #068ce1); 
    background: -moz-linear-gradient(top, #1c9dee, #068ce1); 
    background: -ms-linear-gradient(top, #1c9dee, #068ce1); 
    background: -o-linear-gradient(top, #1c9dee, #068ce1); 

    -webkit-transition: width 230ms ease-out; 
     -moz-transition: width 230ms ease-out; 
     -ms-transition: width 230ms ease-out; 
     -o-transition: width 230ms ease-out; 
      transition: width 230ms ease-out; 
} 

#ProgressText { 
    position: absolute; 
    top: 5px; 
    left: 10px; 
    font-size: 11px; 
    font-weight: 700; 
    color: #fff; 
    text-shadow: 0 -1px rgba(0,0,0, .15); 
} 

Answer 1

有一個bug in webkit（或至少鉻）與border-radius,overflow: hidden和position的組合不是static。您在twitter上的示例鏈接使用靜態位置。所以我會說你唯一的選擇是使用position: static。我修改了代碼，這樣做：

<div id="SuggestComplete"> 
    <div id="SuggestProgressContainer"> 
     <div id="SuggestProgressBar"> 
      <div id="SuggestProgress"></div> 
     </div> 
     <span id="ProgressText">Follow 5 collections</span> 
    </div> 
</div> 

<div id="button">test</div> 

CSS：

#SuggestProgressContainer { 
    height: 27px; 
    float: left; 
    margin: 4px 20px 0 0; 
    position: relative; top: 0; left: 0; 
    width: 247px; 
    /*overflow: hidden; 

    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;*/ /* removed here */ 
} 

#SuggestProgressBar { 
    width: 247px; 
    height: 27px; 
    background: #c6c6c6; 
    border: 1px solid #bfbfbf; 
    position: absolute; top: 0; left: 0; 

    /* added overflow and border radius here */ 
    overflow: hidden; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

#SuggestProgress { 
    height: 100%; 
    width: 50px; 
    /*position: absolute; top: 0; left: 0;*/ /* so it is static to prevent the bug */ 
    border: 1px solid #068CE1; 
    background: #0F93E7; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1)); 
    background: -webkit-linear-gradient(top, #1c9dee, #068ce1); 
    background: -moz-linear-gradient(top, #1c9dee, #068ce1); 
    background: -ms-linear-gradient(top, #1c9dee, #068ce1); 
    background: -o-linear-gradient(top, #1c9dee, #068ce1); 

    -webkit-transition: width 230ms ease-out; 
     -moz-transition: width 230ms ease-out; 
     -ms-transition: width 230ms ease-out; 
     -o-transition: width 230ms ease-out; 
      transition: width 230ms ease-out; 
} 

這似乎工作。 Here is a demo。

有趣的是，錯誤報告中描述的問題似乎是固定的，因爲那時即使沒有以編程方式更改width，也會出現問題。但看起來他們忘記了解決再次發生事件的問題。