Question

同样的html / css会返回截然不同的结果......这里发生了什么？

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

我已经遇到了两个浏览器之间略有不同大小/位置的下拉菜单渲染问题，我怀疑是因为它们以略微不同的方式将文本放在主导航项的旁边。 / p>

非常感谢任何见解!!

FIREFOX：

反转片：

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>

Answer 1

经过一番愚弄，我发现了这个问题。这有点复杂，这可能是我不能早点看到解决方案的原因。

我在页面顶部缺少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;

是从父李（nav ul li）继承的

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

1 个答案: