那是因为你将宽度设置为 100%,所以在添加了 box-shadow 之后,它的 100%+10px(10px 被分为两侧)。如果您position:fixed;
在标题上也使用过,您将不会遇到问题。顺便说一句,它在 Safari 中做同样的事情,所以 webkit 受到影响。您可以做的是将它们包装在一个容器中并将其设置为 100%,overflow:hidden
然后在内部元素上使其也根据需要使用框阴影 100%.. 这样它就会从左/右侧被剪掉。
就像是:
<style type="text/css">
#header {
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
left:0;
overflow:hidden;
position:absolute;
top:0;
width:100%;
z-index:4;
}
#header-inner {
width: 100%;
-moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
}
</style>
<div id="header">
<div id="header-inner">
<div id="logo">
...
</div>
<div id="menu-background"></div>
<div id="menu-wrapper">
...
</div>
</div>
</div>