Question

我遇到的问题是，当通过jQuery应用css border-radius属性时，<div/>的{{1}}被删除。具有半径的width也会裁剪<div/>定位absolute。我在下面列举了一个例子：

这是一个类似的例子，它适用于Twitter（首先登录）： https://twitter.com/welcome/recommendations

浏览器版本：Chrome 26.0.1410.65

<div/>

Answer 1

border-radius（或至少Chrome）包含除overflow: hidden以外的position，static和position: static的组合。 twitter上的示例链接使用静态位置。所以我要说你唯一的选择就是使用<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>。我修改了你的代码：

#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;
}

CSS：

width

这似乎有效。 bug in webkit

有趣的是，错误报告中描述的问题似乎已得到解决，因为即使没有以编程方式更改{{1}}，问题仍然存在。但看起来他们似乎忘了解决重新报道事件的问题。

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

1 个答案: