谷歌浏览器的 CSS 对齐问题答案

【问题标题】：CSS Alignment problem with Google Chrome谷歌浏览器的 CSS 对齐问题
【发布时间】：2011-04-20 02:16:06
【问题描述】：

我的桌子有点对齐问题。这只发生在谷歌浏览器上。我想让我的标题复选框与我的表格的所有复选框对齐。在我添加 css table-layout:fixed; 之前，一切都在 IE 和 Chrome 上运行良好。您可以在下面看到结果。在 Chrome 上，标题复选框不再与我表中的所有其他复选框对齐。

这是我的 CSS：

table.search-results
{
  border-collapse: collapse;  
  table-layout:fixed;
  width: 100%;
}

table.search-results td.tipsy-empty { width: 5px;  }
table.search-results td.tipsy       { width: 5px;  }
table.search-results td.checkbox    { width:20px;  }
table.search-results td.favoricon   { width:20px;  }
table.search-results td.idaffaire   { width:50px;  }
table.search-results td.information { width:auto; white-space:nowrap; overflow:hidden; }
table.search-results td.username    { width:50px;  }

非常感谢任何帮助。

【问题讨论】：

在 jsFiddle 中发布一些 HTML 和 CSS，它会更容易为您提供帮助。
@cdeszaq：不幸的是，我尝试在 jsFiddle 中重现该问题但没有成功。该页面非常复杂（至少对我而言）。我是初学者，对不起。

标签： css google-chrome

【解决方案1】：

使用 CSS 重置：http://developer.yahoo.com/yui/reset/

看起来浏览器对这些元素有不同的默认 CSS 设置。始终使用 CSS 重置，不要让浏览器控制你 :)

如果您使用的是 Webkit 圆角，也可能是问题所在。注意彩色标签是如何被推出的。 IE 不支持这些圆角，这就是它们应有的显示的原因。检查Safari，我敢打赌那是你的问题。找到圆角的非css方法。它们可能有点丑陋，但它们可以防止这样的事情发生。

【讨论】：

我尝试了 CSS 重置，但没有帮助。无论如何，谢谢。
想通了。我认为你的问题在于圆角。如果您仍然遇到此问题，请删除圆角并查看是否可以解决您的问题。如果是这样，想办法在没有 webkit 的情况下添加圆角。