使用Jquery设置CSS宽度时，边框半径会发生变化

Border Radius changes when setting CSS width using Jquery

本文关键字：变化 边框 设置 Jquery CSS 使用      更新时间：2023-09-26

我遇到的问题是，<div/>的border-radius通过jQuery应用css width属性时被删除。具有半径的<div/>也裁剪了定位于<div/>的absolute。我在下面包含了一个例子:

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

这里是一个类似的例子，它适用于Twitter(先登录):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);
}

webkit(或至少Chrome)中存在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;
}

似乎有效。这是一个演示。

有趣的是，错误报告中描述的问题似乎已经修复，因为即使没有通过编程更改width，问题也会发生。但是看起来他们也忘记解决渲染事件的问题了

相关文章：