如何在不破坏链接的情况下为IE应用背景大小的修复？

时间：2012-07-13 09:34:13

标签： html css

我有一组链接，这些链接都适用于Chrome和Firefox，但IE中的某个链接无法点击，也没有通过代码中的网址链接。我现在知道原因是IE的后台大小修复。如何在不破坏链接的情况下应用背景大小的修复？

HTML（tierThreeCentre链接是在IE中不起作用的链接）：

<div class="tierThreeOrange">
    <h3>Header 1</h3>
    <a href="/home/" class="buttonLeft">Find out more</a>

</div>
<div class="tierThreeCentre"><!--this is the link not working in IE -->
    <h3>Header 2</h3>
    <a href="/home/next-page/" class="buttonLeft">Find out more</a>

</div>
<div class="tierThreeOrangeRight">
    <a href="http://promo.thissite.com" class="button">Find out more</a>
</div>

CSS：

.tierThree, .tierThreeOrange, .tierThreeCentre, {
    position:relative;
    float:left;
    width:190px;
    height:150px;
    margin:20px 23px 20px 0px;
    padding:0;
    box-shadow:5px 5px 10px #888686;
    -webkit-box-shadow:5px 5px 10px #888686;
    -moz-box-shadow:5px 5px 10px #888686;
}

.tierThree, .tierThreeOrange, .tierThreeBlack {
    background:url(/path/path2/images/hp/ah-t3l.png) no-repeat; 
    background-position: -49px -150px;
    background-size: 340px;
    background-position-x: -49px; /* IE fix */
    background-position-y: -150px /* IE fix */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/path2/images/hp/ah-t3l.png', sizingMethod='scale'); /* background-size fix for IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/path2/images/hp/ah-t3l.png',sizingMethod='scale')"; /* background-size fix for IE */
}

.tierThreeCentre {
    background:url(/path/path2/images/hp/ah-t3c.png) no-repeat;
    background-size:200px 150px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/path2/images/hp/ah-t3c.png', sizingMethod='scale'); /* background-size fix for IE */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//path/path2/images/hp/ah-t3c.png',sizingMethod='scale')"; /* background-size fix for IE */
}
.tierThreeRight, .tierThreeOrangeRight,  {
    position:relative;
    float:left;
    width:190px;
    height:150px;
    margin:20px 20px 20px 0px;
    padding:0;
    box-shadow:5px 5px 10px #E0E0E0;
    -webkit-box-shadow:5px 5px 10px #E0E0E0;
    -moz-box-shadow:5px 5px 10px #E0E0E0;
}

.tierThreeRight, .tierThreeOrangeRight, .tierThreeBlackRight {
    background:url(/path/path2/images/hp/ah-t3r.png) no-repeat;
    background-position:-30px
}

.button {
    -moz-box-shadow:inset 0px -8px 0px -1px #fe5715;
    -webkit-box-shadow:inset 0px -8px 0px -1px #fe5715;
    box-shadow:inset 0px -8px 0px -1px #fe5715;
    background:#fe5715; /* Old browsers */
    background:-moz-linear-gradient(top, #ffb260 0%, #fe5715 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb260), color-stop(100%,#fe5715)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* IE10+ */
    background:linear-gradient(top, #ffb260 0%,#fe5715 100%); /* W3C */
    _filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#fe5715',GradientType=0 ); /* IE6-9 (underscrore hack for IE9) */
    -moz-border-radius:19px;
    -webkit-border-radius:19px;
    border-radius:19px;
    border:1px solid #ffffff;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:3px 17px;
    text-decoration:none;
    text-shadow:0px -1px 0px #fe5715;
    position:absolute;
    right:10px;
    bottom:15px;
}
.button:hover {
    -moz-box-shadow:inset 0px -6px 0px -1px #fe7944;
    -webkit-box-shadow:inset 0px -6px 0px -1px #fe7944;
    box-shadow:inset 0px -6px 0px -1px #fe7944;
    background:#fe7944; /* Old browsers */
    background:-moz-linear-gradient(top, #ffc180 0%, #fe7944 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc180), color-stop(100%,#fe7944)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* IE10+ */
    background:linear-gradient(top, #ffc180 0%,#fe7944 100%); /* W3C */
    _filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc180', endColorstr='#fe7944',GradientType=0 ); /* IE6-9 (underscrore hack for IE9) */
    text-shadow:0px 1px 0px #fe5715;
    text-decoration:none
}

.buttonLeft {
    -moz-box-shadow:inset 0px -8px 0px -1px #fe5715;
    -webkit-box-shadow:inset 0px -8px 0px -1px #fe5715;
    box-shadow:inset 0px -8px 0px -1px #fe5715;
    background:#fe5715; /* Old browsers */
    background:-moz-linear-gradient(top, #ffb260 0%, #fe5715 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb260), color-stop(100%,#fe5715)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #ffb260 0%,#fe5715 100%); /* IE10+ */
    background:linear-gradient(top, #ffb260 0%,#fe5715 100%); /* W3C */
    _filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#fe5715',GradientType=0 ); /* IE6-9 (underscrore hack for IE9) */
    -moz-border-radius:19px;
    -webkit-border-radius:19px;
    border-radius:19px;
    border:1px solid #ffffff;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:3px 17px;
    text-decoration:none;
    text-shadow:0px -1px 0px #fe5715;
    position:absolute;
    left:10px;
    bottom:15px;
}
.buttonLeft:hover {
    -moz-box-shadow:inset 0px -6px 0px -1px #fe7944;
    -webkit-box-shadow:inset 0px -6px 0px -1px #fe7944;
    box-shadow:inset 0px -6px 0px -1px #fe7944;
    background:#fe7944; /* Old browsers */
    background:-moz-linear-gradient(top, #ffc180 0%, #fe7944 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc180), color-stop(100%,#fe7944)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* Opera 11.10+ */
    background:-ms-linear-gradient(top, #ffc180 0%,#fe7944 100%); /* IE10+ */
    background:linear-gradient(top, #ffc180 0%,#fe7944 100%); /* W3C */
    _filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc180', endColorstr='#fe7944',GradientType=0 ); /* IE6-9 (underscrore hack for IE9) */
    text-shadow:0px 1px 0px #fe5715;
    text-decoration:none
}

1 个答案:

答案 0 :(得分：1)

嘿现在给像这样的锚链接显示属性

a.buttonLeft{
display:block;
}
相关问题
最新问题