Question

我正在尝试创建一个将在IE＆lt;中显示的叠加层9并显示有关升级浏览器的消息。叠加和消息显示正常。他们唯一无法弄清楚的是如何防止页面上的元素仍然可点击。这是相关的HTML和CSS。

HTML：

 <!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/blockIE.css")" />
<![endif]-->
</head>
<body>
    <div class="blockIE"><div class="blockIEMessage"><img src="@Url.Content("~/Content/img/no-ie6.png")" alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support your browser.  Your browser is out of date and insecure.</strong><br /><br />Please upgrade your browser to <a href="http://firefox.com">Mozilla Firefox</a> or <a href="http://www.google.com/chrome">Google Chrome</a></div></div>

CSS：

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.blockIE
{
    display: block;
    position: absolute;
    background:transparent;
    top: 0;
    left: 0;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000); 
    zoom: 1;
    width: 100%;
    height: 100%;
    z-index: 5000;
}

.blockIEMessage 
{
    background-color: white;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    width: 500px;
    padding-right: 10px;
    height: 200px;
    position: absolute;
    z-index: 6000;
    font-size: 1.4em;
}

Answer 1

在页面内容周围使用包装器，将blockIEMessage放在包装器之外，并将其设置为.wrapper{display:none}以获取IE＆lt; 8。

或者在页面内容上方放置一个透明框，然后将blockIEMEssage放在上面：

 .transparent-box{
     width:100%;
     height:100%;
     position:fixed;
     zoom: 1;
     filter: alpha(opacity=50);
     opacity: 0.5;
     z-index:10;
 }

 .blockIEMessage{
    position:absolute;
    z-index:20;
}

将您的邮件置于.blockIEMessage内的div中。并根据自己的喜好设置不透明度。

Answer 2

当叠加层显示时，我最终只是隐藏了所有链接，按钮，输入等，因此当显示叠加层时，用户将无法点击任何链接，按钮，输入等。我认为这根本不是一个卑鄙的举动。如果用户停留在XP和IE8上，他们可以升级到Firefox或Chrome。我不会浪费时间让这个网站在旧的IE中工作。

创建CSS叠加可防止在IE中单击下方

2 个答案: