Question

我正在尝试在IE8（picture attached）

中绘制此按钮

我从其他来源获取了CSS，只留下了我认为需要的内容。

我最终得到了这句话：

.ie8 .aaa .button1{padding-right:4px;width:94px}

aaa来自前一个来源，因此未在我的HTML中使用，即：

<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
.
.
.
<form action="a.htm" method="POST" target="_blank">
<div class="button-holder"><input type="submit" class="button1" value="Hello">
<span class="arrow"></span>
</div>
</form>

然而，当我删除.aaa时，该行看起来像：

.ie8 .button1{padding-right:4px;width:94px}

IE8中按钮的外观从它的外观变化 - 我的图片左边的版本，宽度更薄，我的图片上的版本更宽 - 宽度更宽。

为什么会发生这种情况，如何在删除行中不必要的.aaa的同时保持左侧的外观？

这是完整的CSS：

.button-holder {
    float: left;
    margin-left: 0px;
    position: relative;
}

.button1 {
    padding: 4px 30px 4px 8px;
    border-style: solid;
    border-radius: 4px;
    font-size: 17px;
    line-height: 22px;
}

.arrow:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


.arrow:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: 6px;
}
.arrow:before, .arrow:after {
    content: "";
    position: absolute;
    background-color: red;
    height: 11px;
    top: 6px;
    right: 10px;
    width: 3px;
}

.button1 {
    border-style: solid;
    -webkit-border-radius: 5px;
    -moz-border-radius-: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 4px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 4px 1px rgba(0,0,0,0.3);
    box-shadow: 0 1px 4px 1px rgba(0,0,0,0.3);
    background-color: #FFE76E;
    background-image: -moz-linear-gradient(center top,#F90,#FC0);
    background-image: -webkit-gradient(linear, 50.00% 100.00%, 50.00% 0.00%, color-stop( 0% , rgba(255,198,1,1.00)),color-stop( 100% , rgba(255,248,162,1.00)));
    background-image: -ms-linear-gradient(top,#F90 0,#FC0 100%);
    background-image: -webkit-linear-gradient(90deg,rgba(255,198,1,1.00) 0%,rgba(255,248,162,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(255,198,1,1.00) 0%,rgba(255,248,162,1.00) 100%);
    text-decoration: none;
    font-family: Arial,Helvetica,Arial,sans-serif;
    font-weight:bold;
    color: #003!important;
    text-align: center;
    display: inline-block;
    border: 0;
}

.button1:hover, .button1:focus {
    background-color: #FFC808;
    background-image: -moz-linear-gradient(center top,#F90,#FC0);
    background-image: -webkit-gradient(linear, 50.00% 100.00%, 50.00% 0.00%, color-stop( 0% , rgba(237,162,0,1.00)),color-stop( 100% , rgba(255,234,93,1.00)));
    background-image: -ms-linear-gradient(top,#F90 0,#FC0 100%);
    background-image: -webkit-linear-gradient(90deg,rgba(237,162,0,1.00) 0%,rgba(255,234,93,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(237,162,0,1.00) 0%,rgba(255,234,93,1.00) 100%);
    text-decoration: none;
}


.ie8 .aaa .button1 {
    padding-right:4px;
    width:94px;
}
.ie8 .arrow:before,
.ie8 .arrow:after {
    background-color:transparent;
}
.ie8 .arrow:after { 
    font-size:40px;
    font-size:4rem;
    content:"›";
    font-family:Arial,sans-serif;
    line-height:11px;
    text-indent:-5px;
    color:red;
}

Answer 1

根据我对.ie8类的理解（我也在我的代码中使用它），你应该在代码中的某个地方有一个条件注释，以实际将该类应用于html，body或某种类型父元素。然后，您可以使用专门用于ie8的CSS样式来定位元素。例如，这就是我在索引页面上的代码中所拥有的内容：

<!--[if IE 8]> <html class="ie8"> <![endif]-->

这是我从以下地方学到的：Louis Lazaris, ImpressiveWebs.com

我的CSS中不必要的变量，需要影响外观 - 什么＆＃39;错误？

1 个答案: