html - 它是 WebKit 中的最小宽度错误吗？

Question

我在网站标题的怪异渲染上苦苦挣扎了一个小时左右，看起来 WebKit 中存在错误(例如最新的 Chrome)。是错误吗？还是我遗漏了什么？

这是 http://jsfiddle.net/y415st6s/

我希望在网站标题和页面标题之间出现一个分隔符，但只有它的边框溢出网站标题。我正在使用 min-width 设置带有“站点标题”的 block 的宽度，我注意到它至少在 FireFox 和 IE 中工作正常。在 WebKit 中，内部填充似乎不计入具有最小宽度的 block 的外部尺寸。当“宽度”也设置为相同的值时，问题似乎消失了(请参阅 jsfiddle CSS 中的第 28 行)。

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width仅设置 min-width 也应该覆盖“width”，所以看来我的做法是正确的。

复制/粘贴人员...

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 不支持表格元素的最小宽度属性。但是，当应用于表格单元格时，它们将遵守最小宽度。您正在将 display: table 应用于 .htstackpanel div。