Question

我的导航栏设置为100％。酒吧还有1px边框。由于某种原因，边框会导致导航栏向右伸出1或2个像素。我尝试在Firebug中将边框设置为0，果然，它排列正确。我们的网站位于：http://clubschoicefundraising.com/

如您所见，顶部的蓝色导航栏向左侧伸出。我可以删除“右：0”然后它伸出到右侧。如何防止边框导致导航栏伸出？

更新：根据要求，这是我的导航CSS：

nav 
{
position: absolute;
right: 0;
top: 70px;
margin-top: 5px;
font-size: 1.3em;
font-weight: 600;
list-style: none;
width: 100%;
margin: 5px auto;
height: 43px;
padding: 0;
z-index: 10;

/* Background color and gradients */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);    
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
background: -ms-linear-gradient(top, #0272a7, #013953);  
background: -moz-linear-gradient(top, #3C78B9, #28507B);    
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C78B9), to(#28507B));
background: -ms-linear-gradient(top, #3C78B9, #28507B);  

/* Borders */
border: 1px solid #002232;

box-shadow:inset 0px 0px 1px #edf9ff;
}

Answer 1

说明：

默认情况下，边框是在元素的指定范围之外计算的，这就是为元素指定边框时溢出的原因。

解决方案：

使用box-sizing:border-box;以便在100％内计算边框宽度，并且不会溢出。（more info on box sizing on MDN）

IE8 +（see canIuse）

支持

box-sizing:border-box;

Answer 2

将box-sizing: border-box添加到您的nav

nav {
box-sizing: border-box;--> ADDED
position: absolute;
right: 0;
top: 70px;
margin-top: 5px;
font-size: 1.3em;
font-weight: 600;
list-style: none;
box-sizing: border-box;
width: 100%;
margin: 5px auto;
height: 43px;
padding: 0;
z-index: 10;
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
background: -ms-linear-gradient(top, #0272a7, #013953);
background: -moz-linear-gradient(top, #3C78B9, #28507B);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C78B9), to(#28507B));
background: -ms-linear-gradient(top, #3C78B9, #28507B);
border: 1px solid #002232;
box-shadow: inset 0px 0px 1px #edf9ff;
}

有关box-sizing的详情，请参阅此link

Answer 3

这是因为元素的计算width超出了其父元素内的可用空间。

<div>元素 - 除了绝对定位的元素 - 将占用其父元素的可用宽度。

但是在这个特定实例中，您已使用absolute定位从正常流中删除了元素，您可以指定元素的宽度 - 拉伸元素 - 通过left: 0; right: 0;声明在大规模的网络浏览器上工作。

或者，您可以使用box-sizing: border-box;声明让UA计算包含边框和填充的框的width / height。

值得注意的是IE 8及更高版本支持第二种方法。

border导致div重叠超过100％1或2px

3 个答案: