0

端が丸く、片側に境界線がある css 要素があります。境界線と端が丸くなっている側を変更すると、子要素の絶対位置の更新が拒否され、理由がわかりません。2.3 Android ブラウザと Google Chrome でこれをテストしましたが、どちらも同じ問題を示しています。奇妙なことに、Google chrome で右クリックして「要素の検査」に移動すると、位置が更新され、絶対要素が正しく右にスナップされます????

私はこれに非常に混乱しています。これはjsfiddleリンクです。これを修正する方法はありますか? http://jsfiddle.net/yhT5n/1/

元のソース:

HTML:

<div id="page" class="side_a">
    <div class="absl">&nbsp;</div>
</div>​

CSS:

#page{
    margin:30px;
    position:relative;
    display:block;
    width:100px;
    height:150px;
    background-color:gray;
    z-index:10003;
    -webkit-transition-property: width, height;  
    -webkit-transition-duration: 0.5s;
    border-radius: 15px;-moz-border-radius: 15px;    
    border-width:3px;
    border-top-style:none;
    border-right-style:none;
    border-bottom-style:none;
    border-left-style:none;
    border-color:#000;
}

#page.side_a{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-style:dashed;    
}
#page.side_b{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-style:dashed;
}
.absl{
    position:absolute;
    right:0px;
    top:20px;
    width:20px;
    height:20px;
    background:red;
}

JS:

$('#page').live('click', function() {
    $(this).removeClass('side_a').addClass('side_b');
});​
4

2 に答える 2

2

これは Chrome のバグです。ページを (ズームまたはその他の方法で) 強制的に再描画すると、正しい場所に赤いボックスが表示されます。

残念ながら、これに対する回避策はわかりません。

于 2012-05-30T02:45:47.007 に答える
1

壊れた: http://jsfiddle.net/yhT5n/4/

このフィドルに見られるように、問題は角の丸みや破線のスタイルとは無関係です。

#page.a{ border-right:10px solid }
#page.b{ border-left: 10px solid }

修正済み: http://jsfiddle.net/yhT5n/5/

ただし、切り替え時に境界線のサイズを変更することで「修正」できます。

#page.a{ border-right:10px solid }
#page.b{ border-left: 11px solid }

再び壊れた: http://jsfiddle.net/yhT5n/6/

ボックスのサイズ変更モデルを に変更するborder-boxと、上記の「修正」は機能しなくなります。

#page  { box-sizing:  border-box }
#page.a{ border-right:10px solid }
#page.b{ border-left: 11px solid }

代替修正: http://jsfiddle.net/yhT5n/7/

これは、オブジェクトのサイズを変更することによって修正がトリガーされることを示唆しています。したがって、幅を変更して正しい動作をトリガーできます。

#page  { box-sizing:  border-box }
#page.a{ border-right:10px solid; width:100px }
#page.b{ border-left: 10px solid; width:101px }

...または高さを変更することもできます:

#page  { box-sizing:  border-box; height:150px }
#page.a{ border-right:10px solid; }
#page.b{ border-left: 10px solid; height:151px }
于 2012-05-30T12:41:47.387 に答える