代码只适用于Chrome

任何人都知道为什么我的代码只能在Chrome中正确显示，而不是在Firefox或ie中。主要问题是“罗马风格的专栏”。我是一个stoopid noob所以请尽可能简单地回答。有没有办法通过添加供应商前缀来解决这个问题？堆栈溢出现在告诉我要添加更多细节，然后才能问这个问题。所以更多的细节是，经过5个月的努力学习如何编码。如果我无法解决这个问题，我准备退出。我希望在这里使用“问题”这个词是可以的，因为我已经知道问题的标题是不允许的。代码只适用于Chrome

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="main3.css"> 

<title>Chemas Website</title> 

</head> 

<body> 

<header class= "mh-container"> 
<div class= "h-container"> 

<h1>José María Penabad B.</h1> 

<h2 id="Abo">Abogado</h2> 

<h2 id="Att">Attorney at Law</h2> 

<h2 id="San">San Jose, Costa Rica</h2> 

<h2 id="email">[email protected]</h2> 

<div id="scales1"> 
<img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140"> 
</div> 

<div id="scales2"> 
<img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140"> 
</div> 

<div id="flag1"> 
<img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70"> 
</div> 

<div id="flag2"> 
<img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70"> 
</div> 

</div><!--close h-container--> 

</header> 


<!--Roman Columns--> 
<div class="content"> 

<div id="col_topleft"> 
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60"> 
</div> 

<div id="col_topright"> 
<img src="imagesC/col_topright.png" alt="column" height="420" width="60"> 
</div> 

<div id="col_bottleft"> 
<img src="imagesC/col_bottleft.png" alt="column" height="596" width="60"> 
</div> 

<div id="col_bottright"> 
<img src="imagesC/col_bottright.png" alt="column" height="596" width="60"> 
</div> 

<div id="scroll1"> 
<img src="imagesC/scroll1.png" alt="scroll" height="80" width="700"> 
</div> 

<div id="scroll2"> 
<img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385"> 
</div> 

<h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3> 

<p class="p1and2"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate. 
Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut! 
</p> 

<p class="p1and2"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio. 
Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum. 
</p> 

<h3 class=both3>Beinvenido !</h3> 


<p class="p3"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at? 
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum. 
</p> 

<p class="p4"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at? 
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum. 
</p> 

</div><!--close content div--> 

<div> 
<footer> 

<p class="ftr"><strong>Copyright 2017 &copy; All Rights Reserved</strong></p> 

<div> 
<img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center"/> 
</div> 

</footer> 
</div> 
</body> 
</html>     






*{margin:0 ; 
    padding: 0; 
} 

.mh-container{max-width: 100%; 
height: 250px; 
margin: 0 auto; 
/* border: 2px solid red;*/ 
background: #fff; 
background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7); 
}    

h1 {text-align: center; 
color:#c8e1e1; 
text-shadow: 
-1px -1px 0 #000, 
1px -1px 0 #000, 
-1px 1px 0 #000, 
1px 1px 0 #000; 
padding-top: 20px; 
} 

#Abo {text-align: center; 
color: #c8e1e1; 
padding-top: 0px; 
} 

#Att {text-align: center; 
padding-top: 5px; 
color: #c8e1e1; 
} 

#San {text-align: center; 
padding-top: 5px; 
color: #c8e1e1; 
} 

#email {text-align: center; 
padding-top: 5px; 
color: #c8e1e1; 
text-shadow: 
-1px -1px 0 #000, 
1px -1px 0 #000, 
-1px 1px 0 #000, 
1px 1px 0 #000; 
} 

#scales1 {position: absolute; 
top: 25px; 
left: 120px; 
border: 3px solid red; 
height: 140px; 
border-radius: 70px; 
} 

#scales2 {position: absolute; 
top: 25px; 
right: 120px; 
border: 3px solid red; 
height: 140px; 
border-radius: 70px; 
} 

#flag1 {position: absolute; 
top:0px; 
}  

#flag2 {position: absolute; 
top:0px; 
right:0px; 
}  

.f1radius {border-bottom-right-radius: 6px;} 
.f2radius {border-bottom-left-radius: 6px;} 

body {background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7); 
}  

#scroll1 {position: absolute; 
top: 250px; 
left: 190px; 
} 

#scroll2 {position: absolute; 
top: 1183px; 
left: 350px; 
} 

.radius{border-top-left-radius: 8px;  
border-top-right-radius: 8px;} 

/*Roman Columns*/ 
#col_topleft {position: absolute; 
top: 250px; 
left: 25px; 
}  
#col_topright {position: absolute; 
top: 250px; 
right: 25px; 
}  
#col_bottleft {position: absolute; 
top: 670px; 
left: 25px; 
}  
#col_bottright {position: absolute; 
top: 670px; 
right: 25px; 
}  

.toph3 {text-align: center; 
padding-top: 200px; 
color: #c8e1e1 ; 
font-family: sans-serif;} 

.both3 {text-align: center; 
padding-top: 60px; 
color: #c8e1e1; 
font-family: sans-serif;} 

p{margin-left: 150px; 
margin-right: 150px; 
margin-top: 60px; 
text-indent:20px;  
font-family: sans-serif; 
} 

.p1and2 {color: #c8e1e1;} 

.p3 {color: #c8e1e1;} 

.p4 {color: #c8e1e1; 
margin-bottom: 80px;} 

footer {width: 100%; 
min-height: 80px; 
background-color: black 
} 

.ftr {text-align: center; 
padding: 20px; 
color: #c8e1e1; 
}  

img.center{display: block; 
margin-left: auto; 
margin-right: auto; 
padding: 10px; 
}

来源

2017-04-20 Diablo

我搬到你的CSS到样式的标记，它看起来在3个浏览器相同。究竟是什么问题？如果您可以发布屏幕截图或解释什么不起作用，我会为您解决。 – Benr89

@ Benr89感谢您的帮助。我遇到的问题是，当我在Firefox中运行它时，页面两侧的罗马风格列不能一直到达页脚顶部。而在ie中，它们中的一部分一起失踪。就像我说的我是一个noob，我不知道风格标签。但我会做一些研究并尝试添加它们，看看会发生什么。 – Diablo

@ Benr89我仍然没有任何运气。有什么方法可以让我看到你对我的代码所做的修改，这使得它在3个浏览器中看起来是一样的吗？ – Diablo

让我感动的风格标签内的代码，并改变了一些图像文件，因为我显然无法看到你被引用的。

代码如下，从chrome，ie和firefox截图。

所有人似乎都表现出与列相同的表现。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="main3.css"> 

    <title>Chemas Website</title> 
    <style type="text/css"> 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     .mh-container { 
      max-width: 100%; 
      height: 250px; 
      margin: 0 auto; 
      /* border: 2px solid red;*/ 
      background: #fff; 
      background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7); 
     } 

     h1 { 
      text-align: center; 
      color: #c8e1e1; 
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
      padding-top: 20px; 
     } 

     #Abo { 
      text-align: center; 
      color: #c8e1e1; 
      padding-top: 0px; 
     } 

     #Att { 
      text-align: center; 
      padding-top: 5px; 
      color: #c8e1e1; 
     } 

     #San { 
      text-align: center; 
      padding-top: 5px; 
      color: #c8e1e1; 
     } 

     #email { 
      text-align: center; 
      padding-top: 5px; 
      color: #c8e1e1; 
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
     } 

     #scales1 { 
      position: absolute; 
      top: 25px; 
      left: 120px; 
      border: 3px solid red; 
      height: 140px; 
      border-radius: 70px; 
     } 

     #scales2 { 
      position: absolute; 
      top: 25px; 
      right: 120px; 
      border: 3px solid red; 
      height: 140px; 
      border-radius: 70px; 
     } 

     #flag1 { 
      position: absolute; 
      top: 0px; 
     } 

     #flag2 { 
      position: absolute; 
      top: 0px; 
      right: 0px; 
     } 

     .f1radius { 
      border-bottom-right-radius: 6px; 
     } 

     .f2radius { 
      border-bottom-left-radius: 6px; 
     } 

     body { 
      background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7); 
     } 

     #scroll1 { 
      position: absolute; 
      top: 250px; 
      left: 190px; 
     } 

     #scroll2 { 
      position: absolute; 
      top: 1183px; 
      left: 350px; 
     } 

     .radius { 
      border-top-left-radius: 8px; 
      border-top-right-radius: 8px; 
     } 

     /*Roman Columns*/ 
     #col_topleft { 
      position: absolute; 
      top: 250px; 
      left: 25px; 
     } 

     #col_topright { 
      position: absolute; 
      top: 250px; 
      right: 25px; 
     } 

     #col_bottleft { 
      position: absolute; 
      top: 670px; 
      left: 25px; 
     } 

     #col_bottright { 
      position: absolute; 
      top: 670px; 
      right: 25px; 
     } 

     .toph3 { 
      text-align: center; 
      padding-top: 200px; 
      color: #c8e1e1; 
      font-family: sans-serif; 
     } 

     .both3 { 
      text-align: center; 
      padding-top: 60px; 
      color: #c8e1e1; 
      font-family: sans-serif; 
     } 

     p { 
      margin-left: 150px; 
      margin-right: 150px; 
      margin-top: 60px; 
      text-indent: 20px; 
      font-family: sans-serif; 
     } 

     .p1and2 { 
      color: #c8e1e1; 
     } 

     .p3 { 
      color: #c8e1e1; 
     } 

     .p4 { 
      color: #c8e1e1; 
      margin-bottom: 80px; 
     } 

     footer { 
      width: 100%; 
      min-height: 80px; 
      background-color: black; 
     } 

     .ftr { 
      text-align: center; 
      padding: 20px; 
      color: #c8e1e1; 
     } 

     img.center { 
      display: block; 
      margin-left: auto; 
      margin-right: auto; 
      padding: 10px; 
     } 
    </style> 
</head> 

<body> 

    <header class="mh-container"> 
     <div class="h-container"> 

      <h1>José María Penabad B.</h1> 

      <h2 id="Abo">Abogado</h2> 

      <h2 id="Att">Attorney at Law</h2> 

      <h2 id="San">San Jose, Costa Rica</h2> 

      <h2 id="email">[email protected]</h2> 

      <div id="scales1"> 
       <img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140"> 
      </div> 

      <div id="scales2"> 
       <img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140"> 
      </div> 

      <div id="flag1"> 
       <img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70"> 
      </div> 

      <div id="flag2"> 
       <img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70"> 
      </div> 

     </div><!--close h-container--> 

    </header> 


    <!--Roman Columns--> 
    <div class="content"> 

     <div id="col_topleft"> 
      <img src="column.jpg" alt="column" height="420" width="60"> 
     </div> 

     <div id="col_topright"> 
      <img src="column.jpg" alt="column" height="420" width="60"> 
     </div> 

     <div id="col_bottleft"> 
      <img src="column.jpg" alt="column" height="596" width="60"> 
     </div> 

     <div id="col_bottright"> 
      <img src="column.jpg" alt="column" height="596" width="60"> 
     </div> 

     <div id="scroll1"> 
      <img src="imagesC/scroll1.png" alt="scroll" height="80" width="700"> 
     </div> 

     <div id="scroll2"> 
      <img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385"> 
     </div> 

     <h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3> 

     <p class="p1and2"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate. 
      Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut! 
     </p> 

     <p class="p1and2"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio. 
      Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum. 
     </p> 

     <h3 class=both3>Beinvenido !</h3> 


     <p class="p3"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at? 
      Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum. 
     </p> 

     <p class="p4"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at? 
      Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum. 
     </p> 

    </div><!--close content div--> 

    <div> 
     <footer> 

      <p class="ftr"><strong>Copyright 2017 &copy; All Rights Reserved</strong></p> 

      <div> 
       <img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center" /> 
      </div> 

     </footer> 
    </div> 
</body> 
</html>

铬