网站无法在 Internet Explorer 上运行
website not working on Internet Explorer
我在侧栏中有一个垂直菜单,悬停在子菜单上,但在 IE 中,悬停菜单决定出现在页面中间。我正在使用 IE11,因此它不支持仅 IE css。
我不确定是什么导致了这个问题..这是网站的 JSFiddle https://jsfiddle.net/2rhwgymx/
菜单是由纯 CSS 制作的,所以我认为这可能与侧边栏中侧边元素的定位有关...但是侧边栏需要固定位置...
该代码未正确验证,但只有“”标签之类的小东西..这很重要吗?
如有任何帮助,我们将不胜感激。
谢谢
<div id="a">
<ul class="nav">
<li><a href="test7.php">Home</a></li>
<li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
<ul>
<li><a href="accounting.php">Accounting</a></li>
<li><a href="cloud.php">Cloud Accounting</a></li>
<li><a href="tax.php">Tax</a></li>
<li><a href="business.php">Business Planning</a></li>
<li><a href="future.php">Planning Your Future</a></li>
</ul>
</li>
<li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
<ul>
<li><a href="staff.php">Staff</a></li>
<li><a href="values.php">Our Values</a></li>
</ul>
</li>
<li><a href="blog.php">Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
#a{
width: 100%;
margin-bottom: 50px;
overflow: hidden;
}
#a ul{
list-style:none;
text-align: center;
padding: 0px;
}
#a a{
display: inline-block;
text-align: center;
padding: 4px;
color:#fff;
font-size:18px;
padding-bottom:15px;
text-decoration:none;
font-weight:300;
padding-top:10px;
text-decoration:none;
z-index:999999;
width:100%;
}
#a a:hover {
background:#b72629;
}
#a li{
width:100%;
}
.nav{padding:none;}
.nav ul{
display:none; /* HIDE ALL INNER UL */
padding:0px;
}
.nav li:hover > ul{
display:inline-block;
padding:0px; /* SHOW INNER UL ON LI PARENT HOVER */
position: absolute;
background:#e95259;
z-index: 10;
width:100%;
margin-left:100px;
margin-top: -48px;
}
.nav li:hover > ul li hover{background:#b72629;}
这里的问题在于您定位子菜单的方式;您将其绝对定位,然后用边距抵消。这在 Microsoft Edge(Internet Explorer 的继任者)中的工作方式与在 Chrome 中的工作方式相同,但对于 IE,您将需要不同的方法。
首先将嵌套列表定位到它们的父列表项。找到以下内容,并进行注释编辑(注意,li
元素通常不需要 width: 100%
):
#a li {
width: 100%;
position: relative; /* Add this line */
}
现在 li
元素中绝对定位的 ul
元素将根据 li
元素定位,而不是最近定位的祖先元素或视口。
接下来,去掉下面的边距,用left
和top
代替:
.nav li:hover > ul {
display:inline-block;
padding: 0px;
position: absolute;
background: #e95259;
z-index: 10;
width: 100%;
margin-left: 100px; /* Replace with `left: 200px;` */
margin-top: -48px; /* Replace with `top: 0;` */
}
最后,我们要确保这些子菜单在显示时可见。找到以下内容,并删除负责隐藏这些元素的 overflow
属性:
#a {
width: 100%;
margin-bottom: 50px;
overflow: hidden; /* Remove */
}
Internet Explorer 11 中的结果 appears to work as expected。
我在侧栏中有一个垂直菜单,悬停在子菜单上,但在 IE 中,悬停菜单决定出现在页面中间。我正在使用 IE11,因此它不支持仅 IE css。
我不确定是什么导致了这个问题..这是网站的 JSFiddle https://jsfiddle.net/2rhwgymx/
菜单是由纯 CSS 制作的,所以我认为这可能与侧边栏中侧边元素的定位有关...但是侧边栏需要固定位置...
该代码未正确验证,但只有“”标签之类的小东西..这很重要吗?
如有任何帮助,我们将不胜感激。
谢谢
<div id="a">
<ul class="nav">
<li><a href="test7.php">Home</a></li>
<li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
<ul>
<li><a href="accounting.php">Accounting</a></li>
<li><a href="cloud.php">Cloud Accounting</a></li>
<li><a href="tax.php">Tax</a></li>
<li><a href="business.php">Business Planning</a></li>
<li><a href="future.php">Planning Your Future</a></li>
</ul>
</li>
<li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
<ul>
<li><a href="staff.php">Staff</a></li>
<li><a href="values.php">Our Values</a></li>
</ul>
</li>
<li><a href="blog.php">Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
#a{
width: 100%;
margin-bottom: 50px;
overflow: hidden;
}
#a ul{
list-style:none;
text-align: center;
padding: 0px;
}
#a a{
display: inline-block;
text-align: center;
padding: 4px;
color:#fff;
font-size:18px;
padding-bottom:15px;
text-decoration:none;
font-weight:300;
padding-top:10px;
text-decoration:none;
z-index:999999;
width:100%;
}
#a a:hover {
background:#b72629;
}
#a li{
width:100%;
}
.nav{padding:none;}
.nav ul{
display:none; /* HIDE ALL INNER UL */
padding:0px;
}
.nav li:hover > ul{
display:inline-block;
padding:0px; /* SHOW INNER UL ON LI PARENT HOVER */
position: absolute;
background:#e95259;
z-index: 10;
width:100%;
margin-left:100px;
margin-top: -48px;
}
.nav li:hover > ul li hover{background:#b72629;}
这里的问题在于您定位子菜单的方式;您将其绝对定位,然后用边距抵消。这在 Microsoft Edge(Internet Explorer 的继任者)中的工作方式与在 Chrome 中的工作方式相同,但对于 IE,您将需要不同的方法。
首先将嵌套列表定位到它们的父列表项。找到以下内容,并进行注释编辑(注意,li
元素通常不需要 width: 100%
):
#a li {
width: 100%;
position: relative; /* Add this line */
}
现在 li
元素中绝对定位的 ul
元素将根据 li
元素定位,而不是最近定位的祖先元素或视口。
接下来,去掉下面的边距,用left
和top
代替:
.nav li:hover > ul {
display:inline-block;
padding: 0px;
position: absolute;
background: #e95259;
z-index: 10;
width: 100%;
margin-left: 100px; /* Replace with `left: 200px;` */
margin-top: -48px; /* Replace with `top: 0;` */
}
最后,我们要确保这些子菜单在显示时可见。找到以下内容,并删除负责隐藏这些元素的 overflow
属性:
#a {
width: 100%;
margin-bottom: 50px;
overflow: hidden; /* Remove */
}
Internet Explorer 11 中的结果 appears to work as expected。