当子元素使用相对定位时Chrome边框半径被忽略

我正在研究一个项目，该项目利用放置在图像上的圆形div来创建一种看起来像玻璃的效果，您可以在圆形div内拖动图像。当子元素使用相对定位时Chrome边框半径被忽略

该应用的标记如下：

<div id="LookingGlass" class="looking-glass" style="margin:0 auto;"> 
    <div class="looking-glass-images"> 
     <img src="/wp-content/uploads/2011/11/CCDS_Ext_008a-copy.jpg" width="1250" height="980" /> 
     <img src="wp-content/uploads/2011/11/CCDS_Ext_011.jpg" width="967" height="1250" /> 
     <img src="wp-content/uploads/2011/11/CCDS_Ext_012.jpg" width="1250" height="962" /> 
     <img src="wp-content/uploads/2011/11/CCDS_Int_005.jpg" width="912" height="1250" /> 
     <img src="wp-content/uploads/2011/11/CCDS_Int_008.jpg" width="1250" height="833" /> 
    </div> 
    <ul class="looking-glass-nav"></ul> 
</div>

jQuery的自动填入与淡出当前图像和淡入取其被点击的数字资产净值对象。

下面是该对象的萨斯代码以及

@mixin border-radius($size) 
    border-radius: $size 
    -webkit-border-radius: $size 
    -moz-border-radius: $size 

.looking-glass 
    display: block 
    height: 100% 

    .looking-glass-nav 
     li 
      display: inline 
      padding: 5px 

    .looking-glass-images 
     overflow: hidden 
     display: block 
     height: 500px 
     width: 500px 
     @include border-radius(50%) 

     img 
      -webkit-user-select: none 
      -moz-user-select: none 
      user-select: none 
     img.active 
      display: block 
     img.inactive 
      display: none

当我强加于图像可拖动效果给他们的相对位置的风格和由于某种原因停止来自被包含图像的格roundable。这是Chrome中的错误还是我在这里做错了？

来源

2011-11-15 Dave Long

进出口寻找一个答案，一个非常类似的问题，以及。对我来说，它也发生在Safari。你有没有设法找到答案？ +1 – Undefined

愿这可以帮助你写供应商前缀正确的做法是把nonvendor属性名的最后一个位置，就像这样：

-webkit-property: value; 
    -moz-property: value; 
    -ms-property: value; 
    -o-property: value; 
     property: value;

来源

2012-04-11 06:10:50

当子元素使用相对定位时Chrome边框半径被忽略

回答

相关问题