没有针对背景图像上的 IE 可点击性的适当解决方案答案

【问题标题】：No proper solution for IE clickability over background image没有针对背景图像上的 IE 可点击性的适当解决方案
【发布时间】：2016-12-06 07:49:41
【问题描述】：

我已尽我所能制作一个通过 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

【问题讨论】：

您希望能够点击覆盖的背景图片吗？ CSS 指针事件：无；因为该 div 应该可以工作，如此处所述：stackoverflow.com/questions/4822234/…
@Arathi，我在 div 中有一个背景图像。然后，在 div 中，我有不可点击的可点击元素。我正在用代码更新问题..
除非您的元素具有 z-index 或覆盖阻止它们被点击，否则我看不出父容器背景应该如何影响子元素的可点击性。虽然我也无法从您的代码中找出您所指的元素。
如果你在landshoppe.com看到我的页面，你会看到在标题区域有四个菜单链接（博客、贷款、搜索属性和免费列表）在左侧垂直，一个搜索框在中间和右边的图像。左右浮动。我无法单击左侧的菜单链接或中间的搜索框。我已经在我的问题中添加了图片。

标签： css internet-explorer click background-image

【解决方案1】：

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

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

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

这个问题也不是 IE 特有的。在 Chrome 中也不适用于我。 pointer-event: none 使该元素及其子元素不可点击，并单击以进入底层元素。

【讨论】：

指针事件被放在那里作为一个实验，因为有人建议作为一种补救措施......我已经删除了它。但是还是不行！ IE 拒绝让步！
它在 ie11 中适用于我，在 ie11 中模拟 ie8 时也适用。尝试清除 IE 中的缓存。
但是在访问这些页面时会出现 javascript 错误。
我已经清除了我的缓存......还是一样......你能点击链接和搜索输入字段吗？我尝试在网站 netrenderer 上进行测试，但它在 8 上不起作用，更高版本正在渲染我的移动 CSS 版本！无论如何，感谢阿拉希的努力。我想既然它在你这边工作，我需要弄清楚这到底是什么问题......
是的，它正在访问链接页面，搜索也正常工作。但我在 IE Edge 上尝试过，通过仿真设置了 IE8 文档模式。不知道这是否有影响。

【解决方案2】：

@Arathi，我找到了一个解决方案，将 div 内的所有事件放入该 div 内的另一个事件中，并使其位置：绝对。现在它起作用了！虽然我在移动响应式设计中遇到了一些问题。我想我会在下一个级别解决这个问题:)

【讨论】：