gpt4 book ai didi

html - chrome 上的 css 填充问题

转载 作者:行者123 更新时间:2023-11-28 03:35:27 28 4
gpt4 key购买 nike

我使用 CSS 设计了一个导航列表。下面是我的代码

ul#mainnavigation li a {
font: 14px/20px 'Open Sans', Open Sans, Helvetica, Arial, sans-serif;
position:relative;
font-weight:600;
color:#686868;
margin:0;
padding:0 19.7px;
height:50px;
line-height:50px;
display:inline-block;
-webkit-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
-moz-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
-o-transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
transition:color 0.1s linear, background 0.1s linear, border-left-color 0.1s linear, border-bottom-color 0.1s linear;
z-index:100;
}

我遇到的问题是在 firefox 中它工作得很好,但在 chrome 中最后一个导航元素在下面消失了。

在 Firefox 中 padding:0 25.7px;给出正确的结果

在 Chrome 中 padding: 0 26.5px;给出正确的结果

如何确保填充在两种浏览器上都能正常工作?

注意:我已将文档类型定义为 <!DOCTYPE html>

最佳答案

正如您所发现的,不同的浏览器通常会为相同的元素呈现略微不同的像素大小 - 这通常是因为字体大小和浏览器缩放字体的方式,但也可能出于多种原因。

我的建议是:

1) 如果导航菜单必须是 50px 高,缩放里面的元素,为浏览器留出一点额外的空间导致问题,或者:

2) 您还可以删除菜单上硬编码的 50px 高度,让它自动缩放以适应其元素。如果菜单中的任何内容是 float 的,请删除菜单容器上的“高度”属性并添加“溢出:隐藏;” CSS 的属性应该会导致菜单扩展到其中所有内容的高度。

关于html - chrome 上的 css 填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14688507/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com