CSS適用於Chrome，但不適用於IE

Question

我有一個CSS列表來格式化我的鏈接按鈕，但它似乎僅在Chrome中可用，而在IE中不起作用，任何想法，懸停和一切都有效，而不是鏈接本身

提前致謝

的CSS

.button {
  background-color: #4CAF50;
  border-radius: 50%;
  width: 170px;
  height: 170px; 
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  position: absolute; 
  margin-top: 0px; 
  margin-left: 400px;
  background-color: white; 
  color: white; 
  border: 4px solid #83b739;
}

.button1:hover {
  background-color: #83b739;
  color: white;  
}

的HTML

<button class="button button1"><a href="http://www.google.com">link</a></button>

Answer 1

甚至可能不是CSS問題，而是嵌套這樣的交互式元素的問題。

不要在按鈕內放置鏈接。 那太奇怪了。 僅使用<a>元素並設置其樣式。

Answer 2

我不完全確定是什么引起了您的問題，但是最有可能是由於css / html嵌套問題所致，其中多個css樣式與嵌套元素在不同瀏覽器上的交互方式不同？ 最好只刪除html中的button元素，然后將<a>標記設置為按鈕樣式即可。 通過這樣做，代碼就不再那么復雜了，樣式和嵌套元素的問題應該更少了，無論如何，這就是大多數鏈接按鈕的制作方式。 這是一個示例，說明了我如何在最近的項目中創建鏈接按鈕，缺少一些樣式（自定義字體等），但它表明您不需要button標記，沒有它可以更好地工作，以及如何僅使用<a>標簽創建按鈕。

 .btn:link, .btn:visited { display: inline-block; padding: 10px 30px; font-weight: 300; text-decoration: none; color: white; border-radius: 200px; border: 3px solid #1A75BB; margin: 20px 20px 0px 0px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .btn:hover, .btn:active { background-color: #14598e; border-color: #14598e; } .btn-full:link, .btn-full:visited { background-color: #1A75BB; margin-right: 20px; } .btn-full:hover, .btn-full:active { background-color: #14598e; } .btn-ghost:link, .btn-ghost:visited { color: black; border-color: #14598e; } .btn-ghost:hover, .btn-ghost:active { color:white; } 

 <a href="#section-one" class="btn btn-full">Why use AnyMath?</a> <a href="#section-two" class="btn btn-ghost">What problems can AnyMath solve?</a> 

Answer 3

不只是關於IE。 這樣的link-inside-button在Firefox中也不起作用。

如果確實 （三思而后行）需要將它作為按鈕而不只是鏈接，則從按鈕中刪除顯式鏈接並將按鈕包裝為簡單形式 ：

<form action="http://example.com/">
    <button class="button button1" type="submit">link</button>
</form>

但是根據您的代碼，不需要button元素，而應該只使用鏈接：

<a href="http://example.com/" class="button button1">link</button>