css - 没有合适的解决方案来解决背景图片上的 IE 可点击性问题

Question

我已尽我所能制作一个像样的网页，并通过 W3C 验证器等进行验证，并尝试进行响应式设计，并尽我所能增强现场和场外的 SEO。但是我所有的努力都被愚蠢的 IE 付诸东流了!我现在正在使用 IE 8。我多么希望互联网禁止 IE 的各种流浪行为!

我的问题是我无法获得单击放置在 div 背景图像上的元素的解决方案。我是否使用背景颜色。如果我使用不透明的 -ms-filter，div 就会消失!

请哪位大神给个合适的解决办法!我试过在另一个问题中发布这个问题。我刚得到一个没有用的建议。因此，我再次尝试。

我的代码

HTML

<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>

                <div id="smshare">
                        <img src="share.png" width="20" height="20" alt="Share on Social Media">
                            <div id="smp"></div>
                </div>
        <div style="clear:both"></div>

            <div class="header-small-image">
                <img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
                <div  style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
                <div style="clear:both"></div>
            </div>


        <div class="opaq">

                <a href="blogs" title="Search Property On landshoppe">BLOGS</a>
                        <a href="homeloans" title="Search Property On landshoppe">LOANS</a>
                        <a href="search-properties" title="Search Property On landshoppe">SEARCH PROPERTY</a>
                        <a href="post-listing" title="Free listing on Landshoppe">FREE LISTING</a>
                </div>


                        <?php include('searchbox.php');?>

        <div style="clear:both"></div>

 </div>

CSS

#header{background:url('images/Thane2.jpg') no-repeat;background-   size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-   background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg  ',sizingMethod='scale') no-repeat;-ms-        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border-    radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;

 }

我的网站是 www.landshoppe.com

Answer 1

您的 header 元素在 css 中设置了 pointer-events: none;。

#header {
    ...
    pointer-events: none;  //remove this line
}

删除指针事件:无；来自 header 然后单击事件将在其中起作用。

此外，此问题不是 IE 特有的。在 Chrome 中也不适合我。 pointer-event: none 使该元素及其子元素不可点击，并点击以落入底层元素。