Question

我是HTML5的新手而且我被卡住了。 Here is the site I'm coding. Chrome，Firefox和Safari都可以。但在IE中有很多问题。但我会问最烦人的一个：我无法让IE中的菜单项保持内联。在你问之前，是的，我已经尝试过在互联网上写的几十种不同的解决方案，

这是我的CSS代码：

#wrap{
margin: auto;
position: absolute;
bottom:0px;
width: 915px;
left:0;
right:0;}

nav{ 
text-align:center;
margin-bottom:-4px;}

nav ul li {
display: inline-block;
zoom: 1;
*display: inline;

background-color: rgba(255, 255, 255, 0.5);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: background-color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: linear;
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: linear;}

nav ul li:hover {
background-color: rgba(255, 255, 255, 1);}

nav ul li a {
color:#8F8F8F; text-decoration:none; 
-webkit-transition-property: color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: linear;
transition-property: color;
transition-duration: 0.5s;
transition-timing-function: linear;}

nav ul li a:hover {color:#000;}

这是HMTL：

        <div id="wrap">
    <nav>
        <ul>
            <li style="padding: 8px 25px 10px 25px;"><a style="color:#000"><h2>BS Création</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="tasarimlar.htm"><h2>tasarımlar</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="custom.htm"><h2>kişiye özel</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="magaza.htm"><h2>mağaza</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="contact.htm"><h2>iletişim</h2></a></li>
            <li style="padding: 8px 10px 10px 10px;"><a href="http://www.facebook.com/bscreation"><img  src="img/facebook.png" width="15" height="15"></a>
        </ul>               
    </nav>
    </div>

任何人都可以帮助我吗？谢谢！

Answer 1

IE6-8无法识别像nav这样的HTML5元素。您需要将它们“注册”到那些IE，以便您可以在它们上使用css选择器。请查看this SO question或this article如何实现这一目标。

此外，您应该不惜一切代价避免使用内联样式。把它们放在外部的CSS中，因为你已经有了它。

我尝试了一切！显示：内联将无法在IE上运行

1 个答案: