IE8 отрицательная проблема маржи - PullRequest
Новая
       17

IE8 отрицательная проблема маржи

2 голосов
/ 03 июня 2011

У меня проблема с макетом в IE8, только когда отрицательное поле делает странные вещи.

Я пытался использовать некоторые исправления, найденные на этом форуме, но безрезультатно.В конце концов, сегодня пятница!

Страница находится здесь: http://community.thelandtrust.org.uk/wordpress/

Виновником является поле поиска в правой части, которое имеет отрицательное поле, позволяющее кнопке сидеть.поверх той же строки.

Работает нормально во всех, кроме IE8.В IE8 с правым полем -80px кнопка находится над полем, но справа есть большое пространство.С правым полем -40px кнопка находится на следующей строке, и все еще с большим пробелом вправо.

Я заметил, что каждый раз кажется, что она находится на одинаковом расстоянии от правой.Это проблема очистки?

Заранее благодарим за любую помощь, которую вы можете предложить!

Код: 

<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;
}

1 Ответ

2 голосов
/ 04 июня 2011

почему-то IE8 делает кнопку двойной ширины.

добавление padding: 0; к input.search-submit, кажется, исправляет это

...