Question

我一直在做我的html，并且我总是使用Mozilla Firefox打开它。看起来还可以，但是当我使用Chrome使用本地主机打开它时，它看起来就不一样了。

这是它有所不同的部分：

<div class ="label">
  <li><a href="html/profiles.html"> Profiles</a></li>
  <li><a href="html/expertise.html"> Expertise</a></li>
  <li><a href="html/location.html"> Location</a></li>
</div>

这是css部分：

.label 
{
  display: inline-flex;

}

.label li a 
{
  margin-right: -433px;
  margin-left: 490px;
  text-decoration: none;
  font-size: 20px;
  list-style: none;
  font-family:"Arial", Serif;
  font-weight: bold;
  color: #3b5998;
}
.label li{
  list-style: none;
}

Answer 1

问题是，您正在使用<li>元素而没有包含<ul>元素。在firefox上正确显示它只是运气。

也尝试使用<ul>元素，或删除您的<li>标签。

有关更多信息，请查看此 question。这是使用<ul>或<ol>包括<li>
的documentation

Answer 2

li在没有ul或li的不同浏览器上无法正常工作。您应该使用ol或ul标签将其括起来。这是一个例子

<div class ="label">
<ul>
    <li><a href="html/profiles.html"> Profiles</a></li>
     <li><a href="html/expertise.html"> Expertise</a></li>
     <li><a href="html/location.html"> Location</a></li>
     </ul>
   </div>

此外，所有浏览器的所有HTML元素均具有默认样式。除非且直到浏览器在CSS中找不到该元素的样式，否则这些元素将基于默认样式呈现。如果要在chrome和firefox中显示列表外观，则需要为列表和列表项编写CSS。

为什么我的网站在mozilla firefox和chrome上看起来不同？

2 个答案: