Javascript Chrome中的CSS#/HTML5嵌套表和子填充_Javascript_Css_Html

Javascript Chrome中的CSS#/HTML5嵌套表和子填充

javascript css html

Javascript Chrome中的CSS#/HTML5嵌套表和子填充,javascript,css,html,Javascript,Css,Html,我目前正在尝试为我的UI库SlateJS设置一个多面板小部件。基本上，多面板小部件用许多水平或垂直对齐的面板填充所有可用空间。每个面板都可以有一个与其关联的工具栏我正在使用一系列CSS表来划分可用空间，这很好。问题是，由于某种原因，当布局是水平的时，内部表拒绝处理任何有填充的元素。我找不到填充问题的根源。我已经在Chrome上诊断了17个小时了，但我仍然找不到这种填充物的来源如果我向嵌套在多面板中的面板的内容窗格添加元素，则外部表单元格的行为就好像它有一个等于内容项的填充值的边距顶部值一样。

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

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

如果我向嵌套在多面板中的面板的内容窗格添加元素，则外部表单元格的行为就好像它有一个等于内容项的填充值的边距顶部值一样。这真的很奇怪，因为内部表格单元格不应该影响外部单元格的流动

这里有一个链接，指向实际问题的现场演示：

注：该网站目前仅在Chrome中运行。还要注意的是，这个站点非常频繁地使用shadowdom，因此您必须挖掘shadowdom的内部结构才能看到它的结构

以下是我所做工作的基本描述：

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-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>

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

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-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>


#影子根
#影子根
赫普
#影子根
德普
#影子根
测验
#影子根
德普
#影子根
赫普
#影子根
德普

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

显然，这是由于垂直对齐是外部表div的基线造成的。有趣的是，对以下内容进行了简单修改：

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

成功了。外部和内部div现在在水平方向和垂直方向上都起作用