CSS與Chrome，但不是IE

工作，我有CSS列表格式化我的鏈接按鈕，但它只出現在Chrome中工作，但不是IE，任何想法，懸停和一切工作只是沒有鏈接本身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>

來源

2016-07-04 nsic

它可能甚至不是一個C SS問題，而是像這樣嵌套交互元素的問題。

請勿在按鈕內放置鏈接。這太奇怪了。只使用<a>元素和樣式。

來源

2016-07-04 22:57:34

可能有人請給我如何使用編輯我的代碼示例元件？ – nsic

擺脫按鈕並將該類添加到鏈接。 'link'應該讓你接近。 –

我不完全確定會導致你的問題，但是很可能是由於css/html嵌套問題，其中多個css樣式在不同的瀏覽器上以不同的方式與嵌套元素進行交互？最好是簡單地刪除html中的按鈕元素，只需將<a>標籤的樣式設置爲一個按鈕即可。通過這樣做，代碼不那麼複雜，對於樣式和嵌套元素應該有更少的問題，而這正是大多數鏈接按鈕的方式。下面是我在最近的一個項目中做了一個鏈接按鈕的示例，其中一些樣式缺失（自定義字體等），但它表明您不需要按鈕標籤，沒有它，它會更好地工作，以及如何製作一個只有<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>

來源

2016-07-05 00:08:53 Pegladon

這不只是關於IE瀏覽器。這種鏈接內的按鈕在Firefox中也不起作用。

如果你真的（三思而後行）需要這是一個按鈕，而不是隻是一個鏈接，從您的按鈕刪除顯式鏈接，並在包裹按鈕simple form：

<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>

來源

2016-07-05 00:59:47

好建議，全部修復 – nsic

「形式」黑客是一個可怕的主意！是的，它可能工作，但它可能是最糟糕的方式來做到這一點。不需要按鈕標籤只是一個良好的風格鏈接。 –

@JonP你可能忘了添加「imho」。如果有人真的需要一個按鈕，至少應該以跨瀏覽器工作的方式實現。在其他情況下，當然應該使用常規鏈接（請參閱通過我提供的鏈接提供的一些細節）。 –

CSS與Chrome，但不是IE

回答

相關問題