Chrome VS Firefox 1 px 的链接不同

Posted 2023-03-06

【中文标题】Chrome VS Firefox 1 px 的链接不同

【英文标题】：Chrome VS Firefox 1 px different in link

【发布时间】：2012-10-19 20:05:58

【问题描述】：

大家好，我该如何解决 Chrome 和 Firefox 的一个像素差异？我的菜单链接在 Chrome 中显示正确，但在 Firefox 中我的菜单链接比 Chrome 小 1 px

这里是 CSS：

ul#menu 
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    margin-top:-3px;
    margin-left:7px;
    float:left;
    height:34px;
    display: inline-block; 


ul#menu li 
    text-align: center;
    display: inline;
    list-style: none;
    font-family: 'Museo300Regular';
    font-size:15px;
    font-style:normal;
    line-height: 1;


ul#menu li a 
    background-image:url(../../images2/images/menu_bg_normal.jpg); 
    background-repeat: repeat;
    padding:5px 23px 6px 23px; /*üst sol alt sağ */
    font-weight: normal;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #FEFEFF;
    cursor:pointer; 


.deneme 

    width:964px;
    margin-left:auto;
    margin-right:auto;

这里是 html 部分：

<div class="deneme">
    <ul id="menu">         
     <li><a>Başkan</a></li>
     <li><a>Meclis</a></li>
     <li><a>Enc&#252;men</a></li>
     <li><a>Kurumsal</a></li>
     <li><a>Maltepe</a></li>
     <li><a>Etkinlikler</a></li>
     <li><a>İhaleler</a></li>
     <li><a>E-Belediye</a></li>
     <li><a id="link">Linkler</a></li>
    </ul>
</div>

【问题讨论】：

嗯很奇怪。顺便说一句，它不是小 1px，它在 Firefox 中向下移动了 1px，高度是一样的。

【参考方案1】：

此代码仅针对带有 CSS 的 Firefox

<style type="text/css">
@-moz-document url-prefix() 
h1 
    color: red;


</style>

使用此代码分隔 Firefox 的 css，添加您的代码而不是 h1 以实现像素完美。

【讨论】：

同样的问题我添加了菜单 css 属性而不是 h1 但我得到了相同的结果 1px 差异

【参考方案2】：

编辑 3：添加图像以证明高度相同...

大视野

关闭详情：

编辑 2： 这与您的第一个代码相同，并且在 Chrome 和 Firefox 中呈现相同：http://jsfiddle.net/qavB6/4/

添加

ul#menu li 
/*...*/
display: inline-block;
margin-top: 4px;

和line-height: 35px; 到ul#menu li a 。

享受...

编辑：

将 line-height 设置为特定值，在 Firefox 和 Chrome 上以相同的方式呈现。

http://jsfiddle.net/qavB6/3/

我不知道为什么，但深入挖掘我发现设置 line-height: 38px; 或 line-height: 37px; 在 Chrome 中不会更改 line-height，而在 Firefox 中会更改。

您可以在 Chrome 中看到 36px 和 37px 之间或 38px 和 39px 之间的区别，但在 37px 和 38px 之间没有区别。这就是奇怪行为开始的地方......

【讨论】：

我已经检查了 firefox 和 chrome 仍然存在同样的问题，您可以使用 chrome 和 firefox 检查您的小提琴。在 Chrome 中，您的小提琴菜单 85x28 在 Firefox 中 87x29

我已经编辑了答案，你能检查一下描述的行为吗？

是的，我明白你的意思，但仍然需要解决方案:)

尽量保持 line-height 小于 37px，并使用 margin-top 和 margin-bottom 来区分元素

是的，我已经检查了你编辑的小提琴，因为你说我必须设置小于 37 像素和行高 34 像素，并且我已经检查了 Firefox 87x29 中 Chrome 85x28 中的大小