Как реализовать «Закругленный угол при наведении» в IE? - PullRequest
Новая
       3

Как реализовать «Закругленный угол при наведении» в IE?

2 голосов
/ 11 апреля 2011

Я хочу создать ссылку с эффектом закругленного угла.Однако эффект закругленного угла будет отображаться только при наведении.Используя CSS3, он отлично работает на Mozilla, Chrome и Safari, но не в 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>

Ответы [ 4 ]

7 голосов
/ 11 апреля 2011

Как говорит @Michael Rose, IE8 и ниже просто не поддерживают закругленные углы CSS3.

В этих версиях IE есть множество способов применения закругленных углов.

К моемузнание, лучший из этих обходных путей - CSS3 PIE .

См. другой соответствующий ответ, который я написал:

Является ли файл .htc aхорошая практика в старых версиях IE для закругленных углов, таких как CSS3?

Редактировать в ответ на ваш отредактированный комментарий: я уверен, что 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.

2 голосов
/ 11 апреля 2011

Это просто потому, что скругленные границы реализованы только в IE9, а не ниже.

1 голос
/ 11 апреля 2011

Вы можете проверить совместимость с IE9, просто добавьте 

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

к заголовку вашей страницы, и он будет работать, надеюсь, это

0 голосов
/ 11 апреля 2011

Попробуй это. Это будет работать для 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;
}
...