如何獲取Internet Explorer和歌劇在Firefox和Chrome</p> <p><img src="https://i.stack.imgur.com/qvnsH.jpg" alt="enter image description here"></p> <p>正確

Question

此網頁的div顯示正確顯示這些文本，但在Internet Explorer中長相醜陋和Opera

我的HTML代碼是：

  <div class="newAd"> 
       <span id="newAdButton"> 
        Create a new advert for FREE! 
       </span> 
      </div> 

而CSS是：

.newAd { 
    margin: 0 auto; 
    margin-bottom: 25px; 
    margin-top: 20px; 
    width: 500px; 
} 

#newAdButton { 
    margin: 10px 30px 10px 30px; 
    padding: 10px 40px 10px 40px; 
    background-color: #88FF88; 
    color: #000000; 
    font-size: 27px; 
    border-radius: 20px; 
    border: 5px solid #00FF00; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -o-border-radius: 20px; 
    cursor: pointer; 
    word-spacing: 0px; 
} 

請我怎樣才能使它對IE和Opera的工作？謝謝。

Answer 1

您可以使用按鈕標記代替跨度並將ID應用於按鈕標記。 希望它能正常顯示。

Answer 2

問題是您正在使用該容器的邊框。 Firefox和Chrome有它的外部，而顯然IE和safari有它的內在（作爲一個測試，你可以刪除邊界，看看會發生什麼）。嘗試使用box-sizing:border-box;作爲#newAdButton。