相关疑难解决方法(0)

突然间CSS发生了-moz-box-shadow什么？在我的设计中,Firefox控制台出现了一个奇怪的问题:

但根据CSS Box Shadow规则,我遵循了所有规则,然后发生了什么？这是它所指向的区块:

div.area {
  margin: 2px auto;
  border: 1px solid #ededed;
  -moz-box-shadow: 0 0 2px 0 #ccc;
     -webkit-box-shadow: 0 0 2px 0 #ccc;
     box-shadow: 0 0 2px 0 #ccc;
  margin-top: -80px;
  background-color: #ffffff;
  position: relative;
}

我也尝试了以下内容:

div.area {
      -moz-box-shadow: 0 0 2px #ccc;
         -webkit-box-shadow: 0 0 2px #ccc;
         box-shadow: 0 0 2px #ccc;
}

我正在使用Mozilla Firefox 20.0.

使用案例

我正在尝试构建一个"幻灯片放映"类型的应用程序.每个载玻片有一个固定的纵横比,但我想的内容,以与它们的正常宽度/高度被渲染 - 所以我试图使用CSS3"变换:规模"在幻灯片的内容,使用所述视口宽度/高度我计算理想的比例/边距以使幻灯片适合视口.在一张特定的幻灯片上,我正在为人们展示一些"信息卡",并列出每个人的"接班人"

问题

Chrome在图片上显示出一些非常奇怪的行为.如果您调整窗口大小,图像会移动到整个地方.如果强制图像以某种方式重新绘制图像似乎自我修复(即向下滚动页面并向后滚动)

编辑这似乎与具有边框半径的框内的图像有关!

题

这是Chrome中的错误吗？有没有解决这个问题的工作？

现场例子

活小提琴

在此实例中 - 您可以调整结果窗格的大小以使图像缩放.至少在我的chrome版本中,图像变得混乱.

发布编辑

我把代码调低到了重现问题所需的最低限度.我只使用了webkit供应商前缀.

我还更新了问题描述,因为在摆弄代码之后我意识到它必须与包含图像的元素的边界半径有关!

原始小提琴

HTML

<div class="container">
    <div class="inner">
        <div class="box">
            <img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg"/>
        </div>
    </div>
</div>

CSS

body {
    background-color: black;
}

.inner {
    background-color: white;
    width: 800px;
    height: 600px;
    -webkit-transform-origin: 0 0;
}

.box {
    overflow: hidden;
    -webkit-border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 10px;
}

JAVASCRIPT

(function ($) {
    var $inner = $('.inner');
    var $window = $(window);
    var iWidth = parseInt($inner.css('width'));
    var iHeight = …