IE8负边际问题 [英] IE8 negative margin issue

问题描述

我在IE8中有一个布局问题，只有负边距会造成奇怪的事情。

I have a layout issue in IE8 only where a negative margin does strange things.

我试图使用我在这个论坛中找到的一些修复，但无济于事。毕竟是星期五晚上！

I have tried to use some of the fixes I have found in this forum, but to no avail. It is Friday night after all!

页面在这里： http://community.thelandtrust.org.uk/wordpress/

罪魁祸首是右侧的搜索字段，其中包含允许按钮位于同一行上的负余量。

The culprit is the search field on the right hand side, which has a negative margin to allow the button to sit over it on the same line.

除了IE8之外，它在所有情况下都能正常工作。在IE8中，右边距为-80px，按钮位于字段上方，但右侧有一个很大的空间。右边距为-40px，按钮位于下一行，并且仍然有一个较大的空间。

It works fine in all but IE8. In IE8, with a right margin of -80px the button is over the field but there is a large space to the right. With a right margin of -40px the button is on the next line, and still with a large space to the right.

我注意到它似乎是一样的每次距离右边。这是清算问题吗？

I have noticed that it seems to be the same distance from the right each time. Is it a clearing issue?

提前感谢您提供的任何帮助！

Thanks in advance for any help you can offer!

代码：

<form action="http://community.thelandtrust.org.uk/wordpress/" id="search-form" class="search-form" method="get">
    <div>
        <input type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." id="search-text" name="s" class="search-text">
        <input type="submit" value="Go" id="search-submit" name="submit" class="search-submit button">
    </div>
</form>

CSS：

input,textarea {
    background:#f7f9e0 url(images/Input_gradient.jpg) repeat-x top left;
    border:none;
    -moz-border-radius:20px;
    border-radius:20px;
    vertical-align:middle;
    min-height:20px;
    width:94%;
    font-family:Arial, sans-serif;
    font-size:1em;
    padding:10px 20px;
}
input.button,input#submit {
    background:#e6e99d url(images/Button_gradient.jpg) repeat-x bottom left;
    height:40px;
    width:auto;
    min-width:40px;
    font-weight:700;
    cursor:pointer;
    float:right;
}
input.button:hover,input#submit:hover,#primary-menu li a:hover {
    background:#c7cc5c;
}
form#search-form{
    overflow: hidden;
}
input.search-text {
    margin-right: -80px;
    width: 200px;
    float:left;
    font-size: 1.2em;
}
input.search-submit {
    background:url(images/Button_arrow_40px.png) no-repeat 0 0 transparent!important;
    width:40px;
    text-indent:-1000px;
    font-size: 0;  
    display:block; 
    line-height: 0;
    float:right;
    clear:right;
}
input.search-submit:hover {
    background-position:0 -40px!important;
}

推荐答案

出于某种原因IE8正在制作按钮双倍宽度。

for some reason IE8 is making the button double width.

添加填充：0; 到 input.search- submit 似乎解决了这个问题

adding padding: 0; to input.search-submit seems to fix it

这篇关于IE8负边际问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！