Question

我在使用ie7正确链接div时遇到问题。我已经尝试将锚链接设置为显示：块，以及设置锚点的高度和宽度，但似乎没有任何效果。

ie7显示悬停时的链接，但是当我点击它时不起作用。

我知道这是一个常见的问题，所以我尝试重新安排锚点和div，但似乎没有任何工作......

HTML：

<div class="cat_prod_box" data-id="id-581">
  <a href="http://localhost/test.html" class="block_link" >
    <span style="display:none" class="price">145</span>
    <span style="display:none" class="viewed">142</span>
    <span style="display:none" class="featured">0</span>

    <div class="span_product_name">product</div>
    <div class="span_price">CAD $145.00</div>
    <div class="span_style_num"> style: 198USD</div>
        <div class="image">
            <div class="cat_image_table" style="outline:none;">
                <img src="images/198USD.jpg" alt="alt txt" title="tit txt" width="240" height="332" />
                </div>
            </div>  
            <div class="cat_product_info">
                <div class="icon_div">
                  <div class="icon-wrapper">
                        <ul class="site-icons">
                              <li>
                                <dl>
                                  <dt class="icon_fireproof"></dt>
                                  <dd class="icon_name">fireproof</dd>
                                </dl>
                              </li>                                               
                        </ul>
                  </div>
            </div>
        </div>
    </a>
</div>

的CSS：

.cat_prod_box {width:240px;text-align:left;float:left;margin:0px 0px 10px 2px;position:relative; border: solid 3px transparent;}
.cat_prod_box a img, .cat_prod_box a     { border: none; float: left; }
.cat_prod_box a   { margin: 1px; }
.cat_prod_box a:hover  { outline: 1px solid #ccc; }
a.block_link {display:block;  cursor: pointer; } 

.image {   position: relative;   width: 100%; /* for IE 6 */ }
.cat_image_table { width:235px; margin:0; padding:0; border-spacing:0; border:none; height:340px;}

.cat_product_info {width:240px; height:105px; font-family:arial; font-size:12px;  overflow:hidden; }

.icon_div {
float: left;
width: 255px;
position: absolute;
bottom:0;

}
.icon-wrapper {position: relative; text-align: center;}
.site-icons { text-align: center; }
.icon_div .icon-wrapper .nikeid-icons li { margin-bottom: 10px; width: 52px; display: inline-block; margin-top:10px; }
.icon_div .icon-wrapper .site-icons li dl dt { height: 25px; }
.icon_div .icon-wrapper .site-icons li dl dt img { vertical-align: middle; max-height: 25px; }

http://jsfiddle.net/zt7Y3/2/

上面是小提琴，即使jsfiddle显然没有加载ie7。

Answer 1

看起来像Opera和IE中的bug。

从html中删除图片，并在此课程.cat_image_table的背景上添加您的图片。它将在IE7上运行

.cat_image_table { 
width:235px; margin:0;
padding:0; 
border-spacing:0; 
border:1px solid #000;
height:340px; 
background:url(images/198USD.jpg) no-repeat;
}

即使使用块链接样式，链接的div也不能在ie7中工作

1 个答案: