Question

我遇到了以下问题。我正在显示一个包含页面数据的表，该表嵌套在main中。它的边距左边设置为5％（边距也是右边）并且它已定义宽度。出于某种原因，当我在Chrome中加载页面时，左边距将被忽略。在这里它变得有趣。当我打开开发控制台时，它会被应用。如果我在控制台打开的情况下重新加载页面，它会再次被破坏。当我关闭控制台中的任何CSS设置（或基本触摸与内容相关的任何内容）时，它会再次修复。我正在使用Unsemantic框架来响应行为（只有它的桌面部分），到目前为止我没有遇到任何麻烦，只是这个。由于它表现得很奇怪，我不认为它与代码有任何关系。

您可以在这个简短的屏幕截图上清楚地看到它：http://screencast.com/t/mGotS01iC

为了确保，我发布了元素的HTML和CSS：

<table class="grid-90 prefix-5 suffix-5">
<tbody>
<tr>
<th> UserName </th>
<th> Email </th>
<th> Guid </th>
<th> IsUsingTempPasswd </th>
<th> LastLogin </th>
<th> PasswordChanged </th>
<th>Actions</th>
</tr>
<tr>
<td> Administrator </td>
<td> admin@physter.com </td>
<td>
<div class="table-long">00000002-0000-0000-0000-000000000069</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
<a href="/User/Edit?guid=00000002-0000-0000-0000-000000000069">Edit</a>
|
<a href="/User/Details?guid=00000002-0000-0000-0000-000000000069">Details</a>
|
<a href="/User/Delete?guid=00000002-0000-0000-0000-000000000069">Delete</a>
|
<a href="/User/ResetPassword?guid=00000002-0000-0000-0000-000000000069">Reset Password</a>
</td>
</tr>
<tr>
<td> venca </td>
<td> venca@mail.cz </td>
<td>
<div class="table-long">00000002-0000-0000-0000-00000000006a</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> 23.8.2013 12:23:39 </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
<a href="/User/Edit?guid=00000002-0000-0000-0000-00000000006a">Edit</a>
|
<a href="/User/Details?guid=00000002-0000-0000-0000-00000000006a">Details</a>
|
<a href="/User/Delete?guid=00000002-0000-0000-0000-00000000006a">Delete</a>
|
<a href="/User/ResetPassword?guid=00000002-0000-0000-0000-00000000006a">Reset Password</a>
</td>
</tr>
<tr>
<td colspan="7">
<a href="/User/Create">Create New</a>
</td>
</tr>
</tbody>
</table>

这是元素的CSS：

grid-90 {
    float: left;
    width: 90%;
}
.suffix-5 {
    margin-right: 5%;
}
.prefix-5 {
    margin-left: 5%;
}
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
    -moz-box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}
table {
    border: medium none;
    margin-bottom: 2.5em;
    margin-top: 1em;
    text-align: left;
    width: 100%;
}
body {
    color: #006666;
    font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
    font-size: 0.85em;
}

有人有想法吗？我将非常感谢能够让我按原样保留框架并且不会覆盖其行为的解决方案......

Answer 1

90％的宽度以及您希望桌子位于中心的事实就足够了。边缘将自动计算。所以你的代码看起来像这样：

CSS

grid-90 {
    width: 90%; }

.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
    -moz-box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}
table {
    border: medium none;
    margin-bottom: 2.5em;
    margin-top: 1em;
    text-align: left;
    margin: 0 auto;
}
body {
    color: #006666;
    font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
    font-size: 0.85em;
}

在HTML中删除两个部门的名称：<table class="grid-90">我希望有帮助！

Answer 2

只需要一点点“黑客” - 将float:none !important;添加到<table> elelemnt就足够了。

感谢Dragos Sandu让我了解了这一点 - 从float:left课程中移除grid-90是他的想法，我尝试了第一步。

在页面加载时Chrome中忽略了保证金

2 个答案: