Question

虽然我的问题与SharePoint有关，但我认为这也是一个html / css问题，所以我在这里发布问题。如果您熟悉SharePoint，则可以按照步骤重现问题（或者您可以跳过此部分，没关系）：

创建发布页面，页面布局为“（欢迎页面）空白Web部件页面”
在“左上角”和“右上角”中添加两个Web部件。
在第一个Web部件（左上角）中将“Chrome Type”设置为“None / Border Only”

因此，在非IE浏览器中会出现问题（它们应该在同一行中）：

enter image description here

为简单起见，我创建了一个demo：

<html>
<head>
    <style type="text/css">
        .ms-table {
            display: table;
        }
        .ms-fullWidth {
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .tableCol-75 {
            display: table-cell;
            min-width: 74.9%;
        }
        .cell-margin {
            margin: 5px 0px 5px 0px;
        }
        .tableCol-50 {
            display: table-cell;
            min-width: 49.9%;
        }
    </style>
</head>
<body>
    <div class="ms-table ms-fullWidth">
        <div class="tableCol-75">
            <div class="ms-table ms-fullWidth">
                <div class="cell-margin tableCol-50">
                    <div class="ms-fullWidth">
                        <div class="ms-fullWidth ">
                            <div>
                                <div width="100%">
                                    <div wpid="ctl00_ctl40_g_0b541c21_2ea1_46e2_bc3e_7c10ff98186d">
                                        <table id="myWP1">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <p>hello</p>
                                                        <p>hello</p>
                                                        <p>hello</p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell-margin tableCol-50">
                    <div class="ms-fullWidth">
                        <div class="ms-fullWidth ">
                            <div>
                                <div>
                                    <span><h2 style="text-align:justify;"><nobr><span>Web Part Title</span>
                                    <span></span>
                                    </nobr>
                                    </h2>
                                    </span>
                                </div>
                                <div width="100%">
                                    <div wpid="ctl00_ctl40_g_0b541c21_2ea1_46e2_bc3e_7c10ff98186d">
                                        <table id="myWP2">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <p>hello</p>
                                                        <p>hello</p>
                                                        <p>hello</p>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我的Web部件在所有浏览器中也存在此问题。我不熟悉css，所以我真的不知道如何分析这个问题。但我发现了一些有趣的东西：

如果我在“myWP”之前添加span标签（或其他），则没有问题。（demo）
如果我删除了表格（“myWp”）并改为使用div，则不会再出现问题。（demo）

目前我选择第一种解决方法，但我不知道为什么。这是正确的方法吗？这个问题的原因是什么？提前谢谢！

发布页面中的SharePoint“Chrome Type”问题

0 个答案: