Css Chrome上显示的框上的不规则边框

Css Chrome上显示的框上的不规则边框,css,google-chrome,Css,Google Chrome,我有一个导航栏,您可以在这里(FIREFOX)看到它的正确方面: 当我在Chrome上打开同一页时,当我手动移动窗口的高度和宽度时,您在每个部分中看到的右边框会出现并消失,好像这是某种分辨率问题(它们在那里,但有时不会显示)。所以我得到了这样的东西(来自CHROME): 或者这个(来自CHROME): 这不会发生在Firefox上,因为我可以将窗口大小更改为任何大小,并且所有边框都会继续显示 编辑:我曾尝试在JSFIDLE上复制这一点,但从Firefox和Chrome上打开这一点似乎效果很

我有一个导航栏,您可以在这里(FIREFOX)看到它的正确方面:

当我在Chrome上打开同一页时,当我手动移动窗口的高度和宽度时,您在每个部分中看到的右边框会出现并消失,好像这是某种分辨率问题(它们在那里,但有时不会显示)。所以我得到了这样的东西(来自CHROME):

或者这个(来自CHROME):

这不会发生在Firefox上,因为我可以将窗口大小更改为任何大小,并且所有边框都会继续显示

编辑:我曾尝试在JSFIDLE上复制这一点,但从Firefox和Chrome上打开这一点似乎效果很好,我的问题没有发生在JSFIDLE上:

代码HTML:

<nav>
<a href="#slide1" class="icon-hola"><span>¡HOLA!</span></a>
<a href="#slide2" class="icon-experiencia"><span>EXPERIENCIA</span></a>
<a href="#slide3" class="icon-metodo"><span>TV / MEDIOS</span></a>
<a href="#slide4" class="icon-entrenamos"><span>SERVICIOS</span></a>
<a href="#slide5" class="icon-contacto"><span>CONTACTO</span></a>
</nav>

使用边框宽度为1.5px有什么意义?也许这就是问题所在?浏览器有时无法正确渲染此宽度,请尝试将其设置为1px,也许这会有所帮助,但无法测试,因为在fiddle上一切正常。

如果问题无法解决,请在css中逐个剪切一行,直到找到导致此问题的一行(或多行),我将尝试。谢谢您的关注。好的,另一个问题可能是因为“溢出:隐藏”,em中还有填充,所以我想有时候浏览器会一个接一个地渲染块,这就是为什么不显示边框的原因。我建议您在“a”元素中添加“右边距:2px”,看看是否有效。如果这也无济于事,尝试从css中删除“大纲”。
body, html { padding: 0; margin: 0; font-size: 100%; height:100%;}

body {
   background-color: white;
   width:100%; height:100%;
   overflow: hidden;
   font-family: "Lato", Arial;
   font-weight:300;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
}

.cbp-contentslider nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.313em;
    z-index: 1000;
    border-top: 1.5px solid grey;
    overflow: hidden;
        text-align:center;
}

.cbp-contentslider nav a {
    padding-left: 3.125em;
    float: left;
    display: block;
    width: 20%;
    height: 100%;
    font-weight: 400;
    letter-spacing: 0.1em;
    overflow: hidden;
    color: grey;
    outline: none;
    line-height: 3;
    position: relative;
    text-transform: uppercase;
    border-right: 1.5px solid grey;
    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}