0

我有一个 css 元素，它的一侧有圆形边缘和一个边框，当我更改边框和圆形边缘所在的一侧时，它拒绝更新子元素的绝对位置，我不知道为什么？我已经在 2.3 android 浏览器和谷歌 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 回答