1

IE只知道如何让刚刚戒烟的人再次吸烟！！我正在尝试完善这个响应式导航菜单（以及我开发的另一个网站）以使用 IE8 响应（我不确定 www.testing123.co.za/test1.htm 中的 NAV 是什么样的

当我重新调整浏览器窗口的大小时，NAV 似乎忽略了我的媒体查询或 IE8 不喜欢此设计中涉及的浮动。我觉得应该是后者。

我做了一些研究，听说这应该包含在您的页面中以应用媒体查询，但是在包含 js 文件时我仍然没有运气。我不确定我在这里可能做错了什么？我像这样包含了js文件：

<script src="css3-mediaqueries.js"></script>

无论如何，我希望能澄清必须做些什么来纠正 IE 8 Float 问题（假设这是问题）。

感谢您的帮助，谢谢

CSS就像：

nav {
width: 90%;
margin: 0px auto;   
}

nav ul {
list-style: none;
overflow: hidden;

}

nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 100 24px/1.4 TrumpGothicWestRegular;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
min-height:80px;
padding-top:60px;
}
nav li a img { padding-bottom:5px; display:block; margin: 0px auto; }

/*SMALL*/
nav small {
color: #aaa;    
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;

}

nav li a:hover {
background: #222;
}

nav li:last-child a {
border: none;
}

1100px以下的视口（small-device1100.css）：

nav li a {
    font: 100 21px/1.4 TrumpGothicWestRegular;
    min-height:inherit;
    padding: 10px;
}

nav small {
    font: 100 8px/1 Helvetica, Verdana, Arial, sans-serif;
}
nav li a img { display:none; }

825px 下的视口（small-device825.css）：

nav li a {
    width: 33.333333333333333333333333333333%;
    border-bottom: 1px solid #fff;
    font: 100 24px/1.4 TrumpGothicWestRegular;

}

nav li:last-child a, nav li:nth-child(3) a {
    border-right: none;
}

nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
    border-bottom: none;
}

350px以下的视口（small-device350.css）：

nav li a {
    width: 50%;
    font: 400 21px/1.4 TrumpGothicWestRegular;
    padding-top: 12px;
    padding-bottom: 12px;
}

nav li:nth-child(even) a {
    border-right: none;
}

    nav li:nth-child(3) a {
    border-right: 1px solid #fff;
}


nav li:nth-child(4) a, nav li:nth-child(5) a {
    border-bottom: 1px solid #fff;
}
4

0 回答 0