Question

我已经尽了一切努力，用W3C验证器等方式验证了一个不错的网页，并试图做出响应式设计，尽我所能来增强现场和非现场搜索引擎优化。但是我所有的努力都与愚蠢的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

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

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

删除指针事件：无;从标题然后单击事件将在其中工作。

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

Answer 2

@Arathi，我找到了一个解决方案，将div中的所有事件放入另一个div中并使其位置：绝对。现在它有效！虽然我在移动响应式设计方面存在一些问题。猜猜我会把它作为下一级解决：）

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

2 个答案: