javascript - Chrome 中的 CSS#/HTML5 嵌套表格和子填充

Question

我目前正在尝试为我的 UI 库 SlateJS 设置一个多面板小部件。基本上，一个多面板小部件用许多水平或垂直对齐的面板填充所有可用的空间。每个面板都可以有一个与之关联的工具栏。

我正在使用一系列 CSS 表格来划分可用空间，效果很好。问题是当由于某种原因布局是水平的时，内部表格拒绝与任何具有填充的元素一起玩。我找不到填充问题的根源。我已经在 Chrome 中诊断了大约 17 个小时，但我仍然找不到这个填充的来源。

如果我将一个元素添加到嵌套在多面板内部的面板的内容 Pane 中，会发生什么情况，外部表格单元格的行为就好像它的 margin-top 值等于内容项的填充值.这真的很奇怪，因为内部表格单元格不应该影响外部单元格的流动。

这是一个指向实际问题的现场演示的链接:

http://virogenesys.ddns.net/mapeditor/

注意:该网站目前只能在 Chrome 中运行。另请注意，该站点大量使用影子 dom，因此您必须深入挖掘影子 dom 的内部结构才能看到结构。

这是我正在做的事情的基本表示:

SlateJS.css:

slate-app {
    display: block;
}

/* LIGHTBOX */
/* -------------------------------------------------------------------------------- */

slate-app::shadow > .appContainer {
    position: relative;
    height: 100%;
}

slate-app::shadow > .appContainer > slate-lightbox {
    position: absolute;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

slate-app::shadow > .appContainer > slate-lightbox[visible="true"] {
    display: block;
}

/* MULTIPANEL */
/* -------------------------------------------------------------------------------- */

slate-multipanel {
    display: block;
    width: 100%;
    height: 100%;
}

slate-multipanel > * {
    display: none;
}

slate-multipanel::shadow > .panelTable {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

slate-multipanel::shadow .panelRow0, slate-multipanel::shadow .panelRow1 {
    display: table-row;
    width: 100%;
}

slate-multipanel::shadow .panelRow1 {
    width: 100%;
    height: 1px;
    cursor: ns-resize;
}

slate-multipanel::shadow .panelCell0, slate-multipanel::shadow .panelCell1 {
    position: relative;
    display: table-cell;
    width: 100%;
}

slate-multipanel::shadow .panelCell1 {
    width: 1px;
    height: 100%;
    cursor: ew-resize;
}

slate-multipanel::shadow slate-expander {
    position: absolute;
    cursor: crosshair;
    display: block;
}

/* PANEL */
/* -------------------------------------------------------------------------------- */

slate-panel {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
}

slate-panel > slate-pane:first-of-type {
    display: table-row;
    width: 100%;
    word-wrap: break-word;
    background-color: #FF0000;
}

slate-panel > slate-toolbar:first-of-type {
    display: table-row;
    width: 100%;
    height: 0;
}

/* PANE */
/* -------------------------------------------------------------------------------- */

slate-pane::shadow > .paneCell {
    display: table-cell;
    width: 100%;
}

/* TOOLBAR */
/* -------------------------------------------------------------------------------- */

slate-toolbar::shadow > .toolbarCell {
    display: table-cell;
}

由 Slate.js 及其相关扩展生成的标记:

<slate-app class="mapEditor">
    <slate-multipanel orientation="horizontal">
        #shadow-root
            <div class="panelTable">
                <div class="panelRow0">
                    <div class="panelCell0">
                        <content select=".panel1"></content>
                        <slate-expander orientation="left" draggable="true"></slate-expander>
                        <slate-expander orientation="right" draggable="true"></slate-expander>
                    </div>
                    <div class="panelCell1"></div>
                    <div class="panelCell0">
                        <content select=".panel2"></content>
                        <slate-expander orientation="left" draggable="true"></slate-expander>
                        <slate-expander orientation="right" draggable="true"></slate-expander>
                    </div>
                    <div class="panelCell1"></div>
                    <div class="panelCell0">
                        <content select=".panel3"></content>
                        <slate-expander orientation="left" draggable="true"></slate-expander>
                        <slate-expander orientation="right" draggable="true"></slate-expander>
                    </div>
                </div>
            </div>
        <slate-panel class="panel1">
            <slate-pane>
                #shadow-root
                    <div class="paneCell">
                        <content></content>
                    </div>
                <span>HERP</span>
            </slate-pane>
            <slate-toolbar>
                #shadow-root
                    <div class="toolbarCell">
                        <content></content>
                    </div>
                <span>DERP</span>
            </slate-toolbar>
        </slate-panel>
        <slate-panel class="panel2">
            <slate-pane>
                #shadow-root
                    <div class="paneCell">
                        <content></content>
                    </div>
                <button style="padding:32px;" onclick="var pnode = this.parentNode.parentNode.parentNode;if(pnode.getAttribute('orientation')==='horizontal'){pnode.setAttribute('orientation','vertical');}else{pnode.setAttribute('orientation','horizontal');}">TEST</button>
            </slate-pane>
            <slate-toolbar>
                #shadow-root
                    <div class="toolbarCell">
                        <content></content>
                    </div>
                <span>DERP</span>
            </slate-toolbar>
        </slate-panel>
        <slate-panel class="panel3">
            <slate-pane>
                #shadow-root
                    <div class="paneCell">
                        <content></content>
                    </div>
                <span>HERP</span>
            </slate-pane>
            <slate-toolbar>
                #shadow-root
                    <div class="toolbarCell">
                        <content></content>
                    </div>
                <span>DERP</span>
            </slate-toolbar>
        </slate-panel>
    </slate-multipanel>
</slate-app>

http://i.stack.imgur.com/pyZki.png

从上图中可以看出，由于某种原因，相邻表格单元格的偏移量与其相邻单元格的子元素中的填充量相同。有没有人知道为什么会发生这种情况，以及如何防止这种情况发生？

Answer 1

显然，这是由于垂直对齐是外部表 DIV 的基线造成的。有趣的是，一个简单的修改:

slate-multipanel::shadow .panelCell0, slate-multipanel::shadow .panelCell1 {
    position: relative;
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

成功了。外部和内部 div 现在在水平和垂直方向上都有表现。