Привет, мне нужно следующее изображение, как кривая внизу, чтобы работать в IE.
Вот ссылка, которую я назвал. Это работает хорошо в хром.. но не подходит для меня IE..
.tabrow li {
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
http://css-tricks.com/examples/RoundOutTabs2/
Поэтому дайте мне знать, какое свойство я должен изменить, чтобы работать в IE
Вы можете использовать свойство border-radius
для такого закругленного угла.
.tabrow li
{
border-radius:5px
}
он будет работать для всех последних браузеров, включая IE-9 и более поздних версий. Но если вы хотите поддерживать более старую версию IE, тогда вам нужно какое-то взломать, как этот CSS3PIE
Как это
CSS
.tabrow {
font-family: verdana;
font-size: 12px;
height: 26px;
line-height: 24px;
list-style: none outside none;
margin: 200px 0 20px;
overflow: hidden;
padding: 0;
position: relative;
text-align: center;
}
.tabrow li {
background: -moz-linear-gradient(center top , #ECECEC 50%, #D1D1D1 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #AAAAAA;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), 0 1px 0 #FFFFFF inset;
display: inline-block;
margin: 0 -5px;
padding: 0 20px;
position: relative;
text-shadow: 0 1px #FFFFFF;
z-index: 0;
}
.tabrow a {
color: #555555;
text-decoration: none;
}
.tabrow li.selected {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom-color: #FFFFFF;
color: #333333;
z-index: 2;
}
.tabrow:before {
border-bottom: 1px solid #AAAAAA;
bottom: 0;
content: " ";
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.tabrow li:before, .tabrow li:after {
border: 1px solid #AAAAAA;
bottom: -1px;
content: " ";
height: 5px;
position: absolute;
width: 5px;
}
.tabrow li:before {
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
left: -6px;
}
.tabrow li:after {
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
right: -6px;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFFFFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFFFFF;
}
JS
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});