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

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>标记。

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

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。