箱影和100%流体宽度问题

Question

在过去的一两天里，我一直在改进一个页面，在使用了框影之后，我遇到了一个问题--我希望有人能给我一些简单的方法来解决这个问题。

设置：I有一个div，它有一些属性，包括宽度、最大宽度和框影。

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
       box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}

问题：的“框影”属性在div元素的宽度中添加了40 on 20 on。当屏幕足够小，内容应该击中100%宽度属性时，我们会看到一个水平滚动条。在深入研究CSS之后，我发现这是因为div在技术上更像宽度: 100% +40 it；

我尝试过的内容：，我已经考虑过在父div上设置溢出:隐藏，但是我确实有一个极宽的设置，这会使内容无法访问。我还试着用一个百分比来表示框影CSS中的大小参数--例如1% --然后将div的宽度设置为98%，但是框影CSS似乎不接受其大小的百分比。我还考虑过使用javascript测试浏览器的宽度，然后相应地显示或隐藏框影元素，但这似乎不是最佳解决方案。

必须有更简单的方法来处理这件事。有什么想法？

Answer 1

是浏览器漏洞。

等级库过去一直不清楚这一点，但后来增加了措辞，以澄清阴影不应触发滚动：

阴影不会触发滚动或增加可滚动区域的大小。

但由于之前的遗漏，大多数浏览器确实会触发阴影滚动。现在，所有最近的浏览器都对此进行了修正。

在较旧的浏览器中，您要么使用滚动条，将overflow-x: hidden添加到您的#mydiv中，希望它不会破坏任何东西，要么找到另一种添加阴影的方法(例如使用好的旧PNG)。

另见以下两个相关问题：

• Firefox & CSS3:使用溢出:隐藏和框影
• 容器div上的CSS框阴影会导致滚动条。

Answer 2

有一个解决办法，在流体宽度位置滚动条与框阴影。

如果在CSS中添加@media指令，可以检测浏览器窗口何时处于一定宽度(现代浏览器也支持这一点，IE9也应该支持)。

例如，对于以最大宽度设置为940 to的居中页面填充div，尝试将其添加到样式表中：

@媒体屏幕和(最小宽度:998 8px ){ div#pagewrap {x8px26px #a1a09e；-webkit-box-阴影:3px8px26px #a1a09e；框影:3px8px26px #a1a09e；}}

@media css中998 it的最小宽度是在它触发滚动条之前使下拉阴影消失。