Chrome CSS 宽度问题答案

【问题标题】：Chrome CSS Width IssueChrome CSS 宽度问题
【发布时间】：2015-09-25 15:38:37
【问题描述】：

有人见过这个吗？

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

我正在使用引导程序和 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%)); 
}

}

【问题讨论】：

找到了答案。 div 元素需要位于相同的 DOM 级别，否则 Chrome 可以呈现不同的内容。如果我调整以使工具栏和标题处于同一级别，则 Chrome 呈现正常。

标签： css google-chrome width render

【解决方案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 更糟糕。真是糟透了。

【讨论】：