我遇到了以下问题。我在页面上显示一个包含数据的表格，该表格嵌套在 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;
}
有人有想法吗？我将不胜感激能够让我保持框架原样并且不会覆盖其行为的解决方案......