HTML/CSS 菜单在 IE 上不工作

Question

我正在一个网站上工作，很高兴在 Chrome、Firefox 和 Safari 上一切正常。然后它突然出现在我的脑海里，我开始出汗，心脏开始快速跳动..天啊，我必须在 IE 上测试它！而且，当然，它不起作用:)

所以，我有一个如下所示的菜单：

并且是这样创建的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <title>Test &#8482;</title>

        <link href="styles/small.css" media="(max-width: 1000px)" rel="stylesheet" type="text/css" />
        <link href="styles/large.css" media="(min-width: 1000px)" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="images/test_logo.ico" type="image/x-icon" />
        <link rel="icon" href="images/test_logo.ico" type="image/ico" />
    </head>

    <body onload="setup()">
        <div id="menuContainer">
            <div id="menu">
                <img id="testLogo" alt="menu" src="images/test_write_black.png"/>

                <ul id="navimenu">
                    <li><a class="menuItem" id="homeMenuId"    onclick="homeClicked()"      >Home</a></li>
                    <li><a class="menuItem" id="supportMenuId" onclick="supportClicked()"   >Support</a></li>
                    <li><a class="menuItem" id="contribMenuId" onclick="contributeClicked()">Contribute</a></li>

                    <li><a id="languageText" href="#openModal">English</a></li>
                </ul>
            </div>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" class="close"><img id="imageClose" alt="delete" src="images/logo_delete_on.png"/></a>

                    <button class="language-selection" onclick="onChangeLanguageFunction('en')">English</button>
                    <button class="language-selection" onclick="onChangeLanguageFunction('it')">Italiano</button>
                    <button class="language-selection" onclick="onChangeLanguageFunction('de')">Deutsch</button>
                </div>
            </div>
        </div>
    ...

CSS:

.modalDialog
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}

.modalDialog:target
{
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div
{
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 25px 20px 13px 20px;
    border-radius: 10px;
    border: solid 2px #be6500;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close
{
    background: Transparent;
    position: absolute;
    right: -30px;
    top: -50px;
}

所以当我点击右侧的“语言菜单项”时，会出现modaDialog，我可以选择语言。

在 IE 上（7/8/9/10 试过）所有显示正确，但没有悬停（不是大问题），没有“finger mouse pointer”和菜单项上没有 点击功能。但是菜单下有 3 个“手指鼠标指针”，大约 100px，单击时会更改语言。

可能是什么问题？有没有工具可以检查出什么问题？我已经 validated 该站点并出现 0 个错误。

编辑：在菜单的 CSS 之后：

#menu
{
    height: 64px;
    text-align: center;
    vertical-align:  middle;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 20px;
    text-shadow: 3px 2px 3px #333333;
    background-color: #DDDDDD;
    border-radius: 8px;
    border: solid 2px #555555;
}

#menu ul
{
    height: auto;
    padding: 20px 0px;
    margin: 0px;
}

#menu li
{
    display: inline;
    padding: 20px;
}

.menuItem
{
    color: #0000DD;
    text-decoration: none;
    padding: 8px 8px 8px 8px;
    cursor: pointer;
}

.menuItem:hover
{
    color: #7777FF;
    font-weight: 2000;
    text-shadow: 3px 2px 10px #0000ff;
}

Answer 1

好的，解决了。我把它写成答案是因为我解决了问题，但我希望有人能解释我为什么，因为我不知道。换句话说：此答案只是获得正确且可接受的答案的提示。

出于某种未知原因，IE 不喜欢（或者我不知道他想要它）href="#id"。我不得不用 onclick.

替换所有 href

所以现在的菜单是这样的：

<div id="menuContainer">
    <div id="menu">
        <img id="testLogo" alt="logo" src="images/test_write_black.png">

        <ul id="navimenu">
            <li class="menuItem"> <span id="homeMenuId"     onclick="homeClicked()"      >__HomeMenu__      </span></li>
            <li class="menuItem"> <span id="supportMenuId"  onclick="supportClicked()"   >__SupportMenu__   </span></li>
            <li class="menuItem"> <span id="contribMenuId"  onclick="contributeClicked()">__ContributeMenu__</span></li>
            <li id="languageText"><span id="languageMenuId" onclick="showLanguageMenu();">__language__      </span></li>
        </ul>
    </div>
</div>

<div id="openModal" class="modalDialog">
    <div>
        <span class="close" onclick="hideLanguageMenu();"><img id="imageClose" alt="close" src="images/logo_delete_on.png"></span>

        <button class="languageSelection" onclick="onChangeLanguageFunction('en')">English </button>
        <button class="languageSelection" onclick="onChangeLanguageFunction('it')">Italiano</button>
        <button class="languageSelection" onclick="onChangeLanguageFunction('de')">Deutsch </button>
    </div>
</div>

修改了CSS文件并添加了一个：

#openModal
{
    display: none;
}

并添加了 2 个 js 函数：

function showLanguageMenu()
{
    var langMenu = document.getElementById("openModal");
    langMenu.style.display = "block";
    langMenu.style.opacity = "1";
    langMenu.style.pointerEvents = "auto";
}

function hideLanguageMenu()
{
    var langMenu = document.getElementById("openModal");
    langMenu.style.display = "none";
    langMenu.style.opacity = "0";
    langMenu.style.pointerEvents = "none";
}

适用于 IE，当然也适用于 Firefox 和 Chrome（仍需在 Safari 上测试）。

但是我失去了漂亮的褪色效果，这不是很好，因为它真的很可爱。

Answer 2

关键是在 IE10 中动画不透明度并不总是很可靠。它不做任何事情，而不是动画不透明度，你应该动画可见性：

.modalDialog
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear; /* animation on visibility */
}

.modalDialog:target
{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

JSFIDDLE

HTML/CSS 菜单在 IE 上不工作

HTML/CSS menu not working on IE

html

css

internet-explorer