gpt4 book ai didi

html - firefox 和 chrome 渲染之间的巨大差异

转载 作者:行者123 更新时间:2023-11-28 17:50:45 25 4
gpt4 key购买 nike

相同的 html/css 返回截然不同的结果...这是怎么回事?

我已经包含了页面的所有相关 CSS 和整个 HTML 标记,因此您可以看到结构。您可以在“search1.png”所在的代码底部附近找到搜索栏的 html。

我已经遇到了下拉菜单在两种浏览器之间以略微不同的大小/位置呈现的问题,我怀疑这是因为它们以略微不同的方式呈现主要导航项旁边的文本。

任何见解将不胜感激!!

火狐: 1

Chrome : 1

nav ul{
text-align:right;
font-size:0;
list-style-type: none;
}

nav ul li{
display:inline-block;
height:54px;
padding:0 20 0 20;
background:white;
color:black;
text-align: center;
vertical-align: middle;
line-height: 54px;
font-size:15;
}

nav ul li:hover{
background:#222;
color:white;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

nav ul ul {
position: absolute;
padding-top:15px;
padding-bottom:15px;
padding-left:0px;
background:#222;
z-index:100;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
overflow:hidden;
}

/* SEARCH */
li.red:nth-child(7) > ul:nth-child(1){
width: 328px;
margin-left: -277px;
text-align: center;
margin-top: 54px;
vertical-align: middle;
padding-top:15px;
padding-bottom:15px;
position:relative;
}

HTML:

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>SENECA AV</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>

<div id="top" class="bars"><img src="senecalogo1.png" alt="SENECA">
<nav>
<ul>
<li> PRODUCTS
<ul>
<li></li>
</ul>
</li>
<li> CATALOG
<ul class="left">
<li>STUFF</li>
<li>THINGS</li>
</ul>
</li>
<li> SHOP
</li>
<li class="red"> COMPANY
</li>
<li class="red"> HELP
<ul>
<li> Ask a question </li>
<li> Register your product </li>
<li> Returns/Exchanges </li>
<li> Warranty </li>
<li> FAQ </li>
</ul>
</li>
<li class="red"> TRADE
<ul>
<li> Open an account </li>
<li> Online Retailers </li>
<li> Retail Stores </li>
<li> Contract </li>
</ul>
</li>
<li class="red" style="padding:0 8 0 8;background-image:url('search1.png');width:43px;background-repeat:no-repeat;background-position:center;">
<ul>
<input type="text" value="item, number, SKU">
<input type="submit" value="search">
</ul>
</li>
<li class="red" style="padding:0 15 0 0;">
</li>
</ul>
</nav>
</div>

<div id="bottom" class="bars"></div>

</body>
</html>

最佳答案

经过一番折腾,我发现了问题所在。它有点复杂,这可能是我无法尽快找到解决方案的原因。

我在页面顶部缺少 DOCTYPE 声明。

添加它会立即破坏页面并使整个导航消失,因为我没有正确声明 CSS 大小值。快速查看控制台解释了哪些属性有问题,让我可以一一修复它们。

例如:

padding:0 20 0 20;

需要

padding:0px 20px 0px 20px;

一旦所有相关属性的值都附加了“px”,菜单项就会重新出现。

此外,

nav ul ul {
line-height:15px;
}

需要添加以消除上面 Chrome 示例中明显的可笑的过度填充,一旦添加了 DOCTYPE,它也会出现在 Firefox 中,因为......

line-height:54px;

正在从父 li (nav ul li) 继承

关于html - firefox 和 chrome 渲染之间的巨大差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22373309/

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