為什么我的網站在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。