Я пытаюсь делать вкладки с чистым HTML / CSS, и это хорошо работает во всех основных браузерах.За исключением IE, как 7, так и 8.
Если я не добавлю display: table к ul , содержимое не будет в новой строке в каждом браузере.Однако IE не отображает его в новой строке даже после того, как я добавлю это.Что я могу с этим поделать?Есть ли лучший способ сделать вкладки в чистом HTML / CSS?
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>