css - Chrome CSS 宽度问题

Question

有人见过这个吗？

由于某种原因，Chrome 有一个轻微的宽度渲染问题，在 Firefox 或 Safari 中没有显示。如果您查看图像，您会发现 Chrome 有一个轻微的垂直缩进。顶部元素和当前元素都处于相同的 HTML DOM 级别。两者都具有相同的 & 关系和 CSS。

我正在使用 Bootstrap 和 LESSHat。不要认为它是 CSS，因为 Firefox 或 Safari 没有问题。

我尝试过抗锯齿、灰度，但没有任何效果。

& div.toolbar-group {
position:                               absolute;
z-index:                                200;
width:                                  96%;
padding:                                0;
margin:                                 0 auto;
margin:                                 20% 0 0 2%; 
white-space:                            nowrap;
-webkit-font-smoothing:                 antialiased;
-moz-osx-font-smoothing:                grayscale;      
background:                             #3c4145;
.box-shadow(    2px 0 0px 0 rgba(0,0,0,0.6), 
                -2px 0 0px 0 rgba(0,0,0,0.6));          
& ul.toolbar-frame {
    position:                           relative;
    list-style:                         none;
    height:                             38px;
    width:                              98%;
    border:                             1px solid #000; 
    .background-image(linear-gradient(to bottom, #525252 0%,#2b2b2b 100%)); 
}

}

Answer 1

Chrome 宽度不是您通过 javascript 或 CSS 获得的宽度。

尝试在开发工具打开时使用此代码调整大小。需要 jquery 以方便

$(window).resize(function () {
        console.log(" -jqwidth:", $(window).width(), " -inner:", window.innerWidth, " -outer:", window.outerHeight );
 });

输出如下:

-jqwidth: 973  -inner: 992  -outer: 1100

当 Chrome 显示 892

Chrome 现在比 Explorer 还差。真是糟透了。