Question

我在网站标题的奇怪渲染中挣扎了一个小时左右，看起来WebKit中存在错误（例如最新的Chrome）。这是虫子？或者我错过了什么？

我希望在“网站标题”和“网页标题”之间显示一个分隔符，但只能使其边框溢出网站标题。我使用min-width来设置块的宽度，使用＆＃34;网站标题＆＃34;我注意到它至少在FireFox和IE中运行良好。在WebKit中，看起来内部填充不考虑具有最小宽度的块的外部尺寸。当宽度＆＃39;宽度时，问题似乎消失了。也设置为相同的值（参见jsfiddle CSS中的第28行）。

enter image description here

根据https://developer.mozilla.org/en-US/docs/Web/CSS/min-width设置，最小宽度应覆盖宽度＆＃39;我也似乎正确地做到了这一点。

复制/粘贴的工作人员......

HTML

<header class="siteHeader hstackpanel">
    <div>
        <div class="siteHeader__logoArea hstackpanel">
            <div class="siteHeader__logoIcon">
                <img src="http://static.flaticon.com/png/16/1394.png">
            </div>
            <div class="siteHeader__logoText hstackpanel-autofit">Site Title</div>
            <div class="siteHeader__logoButtons">
                <img src="http://static.flaticon.com/png/16/9916.png">
                <img src="http://static.flaticon.com/png/16/57164.png">
            </div>
        </div>
    </div>
    <div>
        <!-- box with blue border -->
        <div class="siteHeader__splitter"></div>
    </div>
    <div class="hstackpanel-autofit">
        <div class="siteHeader__titleArea hstackpanel">
            <div class="hstackpanel-autofit">
                <div class="siteHeader__titleAreaText hstackpanel hstackpanel-autofit">
                    <span class="siteHeader__pageTitleText">Current Page Title</span>
                </div>
            </div>
            <div>
                <div class="siteHeader__titleAreaButtons hstackpanel"></div>
            </div>
        </div>
    </div>
</header>

CSS

* {
    box-sizing: border-box;
}
.hstackpanel {
    display: table;
    width: 100%;
}
.hstackpanel > div {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    padding: 2px;
}
.hstackpanel > div:not(.hstackpanel-autofit) {
    white-space: nowrap;
    width: 0.01px;
}
img {
    width: 16px;
    height: 16px;
}
.siteHeader {
    background: yellow;
    n_height: 24px;
}
.siteHeader__logoArea {
    min-width: 270px;
    /* width: 270px; */
    padding: 4px 8px;
    background: green;
}
.siteHeader__splitter {
    border: 1px solid blue;
    width: 8px;
    height: 24px;
}
.siteHeader__titleArea {
    padding: 4px 8px;
    background: green;
}

Answer 1

Chrome和Safari不支持表格元素的min-width属性。但是，当应用于表格单元格时，它们将尊重最小宽度。您正在将display: table应用于.htstackpanel div。

它是否具有最小宽度的WebKit中的错误？

1 个答案: