如何在IE中實現「懸停效果圓角」？

我想創建一個圓角效果的鏈接。但是，只有懸停時纔會顯示圓角效果。通過使用CSS3，它在Mozilla，Chrome和Safari上運行良好，但在IE中無法正常工作。如何在IE中實現「懸停效果圓角」？

這裏我的CSS

a { 
color: black; background-color:#ddd; 
text-align: center;font-weight: bold; 
width:110px; height:25px; 
padding: 10px; text-decoration:none; 
} 

.abc:hover { 
background-color: lightblue; 
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; 
}

這裏我的HTML

<a href="#" class="abc">Button</a>

來源

2011-04-11 Always21

在那旁邊，我不得不嘗試在我的css中插入像（ie-css3.htc）這樣的外部文件。它使用div元素，但不適用於懸停元素。這裏我的代碼 .abc：hover { background-color：lightblue; -moz-border-radius：15px; -webkit-border-radius：15px; border-radius：15px; 行爲：url（ie-css3.htc）;/*爲IE */ } – Always21 2011-04-11 08:43:54

正如@Michael Rose所說，IE8和更低版本根本不支持CSS3圓角。

在這些版本的IE中，有各種解決方法可以應用圓角。

據我所知，這些解決方法中最好的是CSS3 PIE。

編輯迴應你的編輯評論：我有理由相信CSS3 PIE支持:hover正常。

編輯2：

我剛剛試了一下，這個CSS的工作原理：

a { 
    color: black; background-color:#ddd; 
    text-align: center;font-weight: bold; 
    width:110px; height:25px; 
    padding: 10px; text-decoration:none; 
    behavior: url(PIE.htc); 
} 

.abc:hover { 
    background-color: lightblue; 
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; 
}

要使其工作，我搬到了behavior屬性爲a塊而不是.abc:hover塊。

來源

2011-04-11 08:46:47 thirtydot

+1，我什至不知道那些'.htc'解決方法存在;） – 2011-04-11 09:02:44

鏈接下載PIE.htc 的文件http://css3pie.com/PIE.htc 只要放在一起與烏龜HTML和CSS文件。那麼你可以使用它！加油〜 – Always21 2011-04-11 09:24:42

thirtydot：謝謝你回答這個問題。其實，不知道有多少個小時，我一直在努力尋找解決這個問題的辦法。最後我明白了〜千千讚賞〜^ _^ – Always21 2011-04-11 09:31:15

它只是因爲圓角邊框僅在IE9並沒有下文實施。

來源

2011-04-11 08:42:21

但有時它可以使用像l（ie-css3.htc）這樣的外部文件。 – Always21 2011-04-11 08:49:51

試試這個。它將爲IE9

工作

<div class="rounded" style="background:#ddd"></div> 

.rounded { 
    height: 100px; 
    width: 100px; 
    margin-right: 20px; 
    padding: 5px; 
    border:2px solid #404040; 
    border-radius: 5px; 
}

來源

2011-04-11 08:57:14 thecodeparadox

感謝您的回答。 – Always21 2011-04-11 09:32:47

您可以檢查與IE9的兼容性，只需添加

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

到您的網頁標題和它去上班，希望ISA

來源

2011-04-11 09:08:42

感謝您的回答。 – Always21 2011-04-11 09:32:22

不客氣，順便說一句：你可以通過點擊評級箭頭下方的真實標記將其標記爲問題的答案:) – 2011-04-11 09:56:11

如何在IE中實現「懸停效果圓角」？

回答

相關問題