IE8 上带有嵌套 img 布局错误的 HTML 输入

Question

我在使用 IE8 和我的 html/css 时遇到问题 =/

该代码在 Chrome、IE9、Mozilla 和 Safari 中运行良好。但在 IE8 上它很难看:

我尝试了很多东西，但没有结果。它似乎是填充的问题......

HTML:

<div class="TituloDasTelas">
<span id="MainContent_LabelTituloTela">Test</span>
<span style="font-size: x-large">|</span>
<div class="buttons">

<input name="ctl00$MainContent$TextBoxFiltro" type="text" maxlength="100" id="MainContent_TextBoxFiltro" title="" class="TextBox300">

<input type="submit" name="ctl00$MainContent$ButtonPesquisar" value="Pesquisar" id="MainContent_ButtonPesquisar" class="regular">

<input type="button" id="PesqAvancada" value="" class="ButtonPesqAvancada" title="">

<img id="MainContent_ImagePesquisaAvancada" class="imgPesqAvancada" src="../../Include/Imagens/down.gif" alt="Pesq.Avançada">


<input type="submit" name="ctl00$MainContent$ButtonExportarParaExcel" value="Exportar" id="MainContent_ButtonExportarParaExcel" title="" class="positive">
</div>
</div>

CSS:

.buttons
{
    margin: 0 0 10px;
    display: inline-block;
}
 .buttons input[type=submit], .buttons input[type=button]
{
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    display: inline;
    float: center;
    background-color: #f5f5f5;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    font-family: "Lucida Grande" , Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: 700;
    color: #565656;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 0;
    margin-top: 10px;
}
.buttons input[type=submit], .buttons input[type=button]
{
    width: 150px;
    overflow: visible;
    padding: 4px 10px 3px 7px;
}

.buttons button[type]
{
    line-height: 17px;
    padding: 5px 10px 5px 7px;
}
:first-child + html button[type]
{
    padding: 4px 10px 3px 7px;
}
.buttons button img, .buttons a img
{
    border: none;
    width: 16px;
    height: 16px;
    margin: 0 3px -3px 0 !important;
    padding: 0;
}
input[type=submit].positive, .buttons a.positive
{
    color: #529214;
}
.buttons a.positive:hover, input[type=submit].positive:hover, .buttons input[type=button]:hover
{
    background-color: #E6EFC2;
    border: 1px solid #C6D880;
    color: #529214;
}
.buttons a.positive:active
{
    background-color: #529214;
    border: 1px solid #529214;
    color: #fff;
}
.buttons a.negative, input[type=submit].negative, .buttons input[type=button]
{
    color: #d12f19;
}
.buttons a.negative:hover, input[type=submit].negative:hover, .buttons input[type=button]:hover
{
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
}
.buttons a.negative:active
{
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: #fff;
}
input[type=submit].regular, .buttons a.regular, .buttons input[type=button]
{
    color: #369;
}
input[type=submit]:hover, .buttons a:hover, .buttons a.regular:hover, input[type=submit].regular:hover, .buttons input[type=button]:hover
{
    background-color: #dff4ff;
    border: 1px solid #c2e1ef;
    color: #369;
}
.buttons a:active, .buttons a.regular:active
{
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: #fff;
}

.ButtonPesqAvancada, .buttons input[type=button]
{
    width: 6px;
    margin-left: -6px;
    z-index: 2;
}

.imgPesqAvancada 
{
    cursor:pointer;
    margin-left:-20px;
    z-index: -1px;
}

严重的不知道是什么问题。有帮助吗？

谢谢

Answer 1

好的，我发现了问题。它与输入的字体有关。我在输入值上写了“1”，并使它的背景颜色相同。现在它在所有浏览器上都很好。