html - 网站元素在 IE 中不起作用

标签 html internet-explorer css web

在我为高中篮球队开发的网站上,某些元素无法在 Internet Explorer 中使用。该网站是 hermantownbasketball.com。男孩篮球侧边栏应该有嵌套的下拉菜单,当您将鼠标悬停在球队上时会出现一个下拉菜单,例如“高中”,然后当您将鼠标悬停在球队下方的年级上时会出现另一个下拉菜单,例如 9 年级。这在 chrome 中工作得很好,但是,我无法在任何版本的 Internet Explorer 中工作。下面是我正在使用的html和相应的css的部分。

不幸的是,我对 css 的了解不够,无法知道 IE 不喜欢我的代码的哪一部分或如何修复它。

非常感谢任何帮助!

HTML

    <span class = "boyItem">
    <h3>High School</h3>

    <li class="group">
    <h4>9th Grade</h4>
    <div class = "nested">Schedule</div>
    <div class = "nested">Events</div>
    <div class ="nested">Forms</div>
    <div class ="nested">Calendar</div>
    </li>
    <li class="group">
    <h4>JV/Varsity</h4>
    <div class = "nested">Schedule</div>
    <div class = "nested">Events</div>
    <div class = "nested">Forms</div>
    <div class = "nested">Calendar</div>
    </li>

    </span>


    /* Creates the box around the title for each boy section. */
    .boyItem h3 { background:#1C23E8; 
    color:#EFFA20; 
    padding-right:2px; padding:10px; 
    font-size:18px; 
    margin-left:-30px; 
    margin-top:-10px;
    }

###CSS

    .boyItem h3:hover { background:#2A8FF5; }

    /* Prevents the boy sub-sections from being visable */
    .boyItem li h4 { position: absolute; left:-9999px; font-size:15px; list-style-type:none;} 

    /* Shows the boy sub-sections when user mouses over the section title. */
    .boyItem:hover li h4 { 
    position:relative; 
    left:10px; 
    background:#1C23E8; 
    color:#EFFA20;  
    padding-left:20px; 
    padding:5px;
    }

    .boyItem:hover li h4:hover { background:#2A8FF5;}


    .nested { position:absolute; 
    left:-9999px; 
    background:#352EFF; 
    color:#EFFA20; 
    padding-right:2px; 
    padding:4px; 
    font-size:14px; 
    margin:2px; 
    margin-left:30px; 
    margin-top:0px; 
    margin-right:0px; 
    margin-bottom:-2px;} 

    .group:hover .nested {position:relative; left:0px; } 
    .group:hover .nested:hover { background:#2A8FF5}

最佳答案

Internet Explorer 以使用独特的方法来实现(真实的和事实上的)标准而闻名。

this library一个镜头。不能保证它会解决任何问题,但绝对值得一试。

关于html - 网站元素在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10889292/

相关文章:

javascript - 使用 jQuery 不隐藏模态

css - Div重叠问题

javascript - 如何像Medium一样进行拖放?

javascript - onpropertychange 检测用户操作

internet-explorer - Internet Explorer 8 将如何影响 Web 应用程序的 QA 测试

html - 如何以字符数固定文本区域的宽度? (cols 属性不起作用)

javascript - 如何在 JavaScript/jQuery 和 HTML 中使用国际数字系统计算数字?

css - 我的 <body> 不接受背景颜色/图像

javascript - 只运行一次函数。 && 在 IE 中不起作用

css - 使用 em 和百分比的 css 字体大小有什么区别?