尝试将 Firefox 的按钮垂直居中会导致 chrome 中的菜单不均匀。我究竟做错了啥？

Posted 2023-02-16

【中文标题】尝试将 Firefox 的按钮垂直居中会导致 chrome 中的菜单不均匀。我究竟做错了啥？

【英文标题】：Attempts to center a button vertically for firefox results in an uneven menu in chrome. What am I doing wrong?尝试将 Firefox 的按钮垂直居中会导致 chrome 中的菜单不均匀。我究竟做错了什么？

【发布时间】：2013-01-04 09:11:57

【问题描述】：

我一直在尝试在 css 中格式化 RSS 按钮的外观，但由于某种原因，浏览器之间存在很大差异。 Chrome 将它完美呈现，就好像我根本不需要弄乱它一样。但在 Firefox 和 IE9 上，它与菜单的其余部分不平衡。所以我添加了填充以使其均匀，并将悬停颜色拉长到菜单栏的底部。这解决了 Firefox 上的问题，但它使菜单在 Chrome 上以相反的方式不均匀。突然，该栏对于其他菜单项来说太长了。

.menunav a 
padding-right: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;

   
.menunav-rss:hover 
    background: #ff6600;
    font-size: 100%;
    padding-top: 3px;
    padding-bottom:3px;

这来自一个 wordpress 网站。我对 css 或编码很陌生，所以我不完全确定如何修改它。修复一个似乎会使另一个变得更糟，我不确定为什么只有 rss 按钮不均匀。

作为参考，这是 Firefox 和 Chrome 上没有任何填充的菜单栏显示的内容。

任何帮助将不胜感激。如果您需要更多信息，我可以轻松提供。

【问题讨论】：

如果可能，请使用 jsfiddle.net 提供问题的工作示例

【参考方案1】：

这是由于浏览器具有不同的“预设”值。把它想象成每个浏览器都有自己的样式表，在你之前应用。

真正的唯一解决方法是使用 CSS 重置。 Eric Mayers 被认为是“goto”，几乎涵盖了您想要的所有内容。

只需在您自己的样式之前加载重置，然后您应该能够调整所有内容以在所有浏览器中看起来或多或少相同。

这样做有点痛苦，但您不应该真正依赖浏览器内置的默认样式。

【讨论】：

我讨厌 CSS 重置的原因是因为我使用了很多 CMS 系统。当最终用户在漂亮的 WYSIWYG 编辑器中输入他们的博客文章时，CSS 重置会破坏他们的项目符号列表（以及其他内容）。出于这个原因，我更愿意使用保留一些默认样式的 CSS 规范化器。我认为知道何时需要“重置”元素的样式是 Web 开发人员的工作，并且仅应出于设置布局外壳样式的目的而重置它（仅此而已）。

【参考方案2】：

我多次遇到相同的问题。我发现设置 vertical-align: top 使其在 FF 和 chrome 中看起来相同（可能也是 IE9，虽然我没有测试过），之后您可以添加 padding-top 以将文本准确定位在锚点内你想要的地方。