Question

我在网站上工作，我很高兴Chrome，Firefox和Safari都看起来很棒。然后它突然出现在我的脑海里，我开始出汗，心脏开始快速跳动..天啊，我必须在IE上测试它！当然，它不起作用:)）

所以，我有一个看起来像这样的菜单：

enter image description here

并以这种方式创建：

<!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;
}

所以当我点击＆＃34; 语言菜单项＆＃34;在右侧，modaDialog出现，我可以选择语言。

在IE上（试过7/8/9/10）所有内容都正确显示，但没有悬停（不是大问题），没有＆＃34; 手指鼠标指针 ＆＃34;菜单项上没有点击功能。但是有3个＆＃34; 手指鼠标指针＆＃34;菜单下大约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

重点是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

Answer 2

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

由于某些未知原因，IE不喜欢（或者我不知道他想要的是什么）href="#id"。我必须用href替换所有onclick。

所以菜单现在是这样的：

<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上测试）。

但是我已经失去了漂亮的褪色效果，这并不好，因为它非常可爱。

HTML / CSS菜单无法在IE

2 个答案: