Mam problem z wyświetleniem menu w jednej linijce. Po najechaniu kilka razy kursorem pole zmienia kolory na inne niż zawarte w kodzie. Problem występuje tylko w przypadku użycia display jako "inline-block" i Internet Explorer. Proszę o pomoc, od 2 dni się męczę z tym tematem.
Obrazek z border-image: http://imgur.com/xXSI9Ft
Kod
<html>
<head>
<style>
.nav-menu {
display:inline-block;
background-color:gray;
list-style:none;
}
.menu1 {
display:inline-block;
}
.menu1 a {
background-color:red;
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
}
.menu1 a:hover {
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
background-color:pink;
}
.menu2 {
display:inline-block;
}
.menu2 a {
background-color:blue;
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
}
.menu2 a:hover {
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
background-color:yellow;
}
</style>
</head>
<ul class="nav-menu">
<li class=menu1><a href="">test1</a></li>
<li class=menu2><a href="">test2</a></li>
<li class=menu1><a href="">test3</a></li>
<li class=menu2><a href="">test4</a></li>
</ul>
</html>
<head>
<style>
.nav-menu {
display:inline-block;
background-color:gray;
list-style:none;
}
.menu1 {
display:inline-block;
}
.menu1 a {
background-color:red;
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
}
.menu1 a:hover {
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
background-color:pink;
}
.menu2 {
display:inline-block;
}
.menu2 a {
background-color:blue;
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
}
.menu2 a:hover {
display:inline-block;
border: 10px solid transparent;
border-image: url("http://i.imgur.com/xXSI9Ft.png") 33 33 round;
background-color:yellow;
}
</style>
</head>
<ul class="nav-menu">
<li class=menu1><a href="">test1</a></li>
<li class=menu2><a href="">test2</a></li>
<li class=menu1><a href="">test3</a></li>
<li class=menu2><a href="">test4</a></li>
</ul>
</html>