4

私が抱えている問題は、 jQuery を介して cssプロパティを適用するときborder-radiusに aが削除されることです。半径を持つは、配置された も切り取っています。以下に例を示します。<div/>width<div/>absolute<div/>

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);
}
4

1 に答える 1