页面加载Chrome中忽略的页边距

Question

我遇到了以下问题。我在页面上显示一个包含数据的表，该表嵌套在main中。它的边缘-左设置为5% (边-右也)，它有定义的宽度.由于某种原因，当我在Chrome中加载页面时，左边框将被忽略。现在它变得有趣了。当我打开开发控制台时，它就会被应用。如果我在打开控制台的情况下重新加载页面，它就会再次中断。当我关闭控制台中的任何css设置(或基本触摸任何与内容相关的内容)时，它将再次修复。我正在使用非语义框架来响应行为(只有桌面部分)，到目前为止，我还没有遇到任何问题，只是这样。而且，由于它的行为很奇怪，我认为它与代码没有任何关系。

你可以在这个简短的屏幕上清楚地看到它：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

唯一需要的就是一点点“黑”--把float:none !important;添加到<table> elelemnt就足够了。

感谢德拉戈斯·桑杜，他让我做了这件事--把float:left从grid-90课程中删除是他的主意，也是我尝试的第一步。

Answer 2

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">，我希望这会有所帮助！