Браузеры Webkit отображают CSS иначе, чем Mozilla Firefox ... Почему? - PullRequest
Новая
       52

Браузеры Webkit отображают CSS иначе, чем Mozilla Firefox ... Почему?

5 голосов
/ 20 мая 2010

Я оформляю форму, которая уже была размечена (внесены некоторые изменения разметки), и я обычно работаю в Firefox для стилизации, чтобы я мог использовать firebug и панель инструментов веб-разработчика.

В этом проекте я заметил, что мои стили отображаются для одной конкретной области (нескольких элементов) в браузерах на основе веб-наборов Chrome и Safari по-разному, чем в Firefox (мы даже не войдем в Internet Explorer, хотя он стоит на стороне с дисплеем Firefox).

Я не могу понять, почему стили отображаются так по-разному. Обычно есть какое-то правило, которым я пренебрегаю, что Firefox просто принимает как должное, а другим нужно это указать. Но здесь я не понимаю, почему это так отображается. В частности, я имею в виду нижнюю часть формы, где пользователи могут ввести свои контактные данные, а затем отправить форму. Я приложу снимки экрана для справки относительно несоответствия.

Вот URL, так что не стесняйтесь проверить его самостоятельно. Хотя имейте в виду, что это рабочая страница (уже выпущенная), поэтому, если вы попробуете эту форму, вы БУДЕТЕ добавлены в базу данных контактов CURE.

http://www.helpcurenow.org/survey2010

Вот снимки экрана:

Firefox (так, как я намереваюсь выглядеть) альтернативный текст http://static.helpcurenow.org/images/test/firefox.jpg

Chrome, а затем Safari - странное изменение кнопки отправки альтернативный текст http://static.helpcurenow.org/images/test/chrome.jpg альтернативный текст http://static.helpcurenow.org/images/test/safari.jpg

В качестве бонуса, если кто-нибудь захочет помочь мне с выяснением, почему на самом деле IE7 хочет не показывать фон только за вопросами, и как это исправить, я был бы очень признателен!

Большое спасибо.

Ответы [ 4 ]

8 голосов
/ 20 мая 2010

Ваш <ol> не закрыт, что заставляет webkit поместить кнопку отправки внутри <fieldset> в попытке исправить ваш код.

1 голос
/ 08 февраля 2013

Возможно, вы забыли определенные правила -moz для CSS.

Например - для использования размера ящика вам может потребоваться указать -moz-box-sizing

1 голос
/ 20 мая 2010

Браузеры FF и Webkit имеют некоторые отличия, с ними я тоже сталкивался, особенно с формами!

Я решил эту проблему, разделив свой CSS-код на два браузера с помощью сценария Выбор браузера CSS . Работал чудесами, просто установил некоторые вещи для Webkit и исправил все это.

У вас есть живой пример или какой-нибудь исходный код для публикации, чтобы мы могли помочь вам и с вашими проблемами с IE7?

Надеюсь, это поможет.

Редактировать: 

<ol> 

            <li class="contact-info"> 
                <label class="field-required" for="first_name">First Name</label> 
                <input type="text" size="35" maxlength="250" name="first_name" value="" id="first_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="last_name">Last Name</label> 
                <input type="text" size="35" maxlength="250" name="last_name" value="" id="last_name" /> 
            </li> 

            <li class="contact-info"> 
                <label class="field-required" for="email_address">Email Address</label> 
                <input type="text" size="35" maxlength="100" name="email_address" value="" id="email_address" /> 
            </li> 

        </fieldset> 

        <!--TransactionFields section end--> 
        <script language="JavaScript" type="text/javascript"> 
        ...
        </script> 

        <div class="button-row"> 
            <input type="button" name="SubmitButton" id="SubmitButton"  value="Submit" onclick="SubmitForm425952(form);"  class='HtmlButton' /> 
        </div> 

    </form> 
    <!--form javascript--> 
    <script language="JavaScript"> 
    ...
    </script> 

NO OL


</div></td></tr> 
</table> 


    </div> 
    <!--End Featured Content-->

Ваш <ol> не был закрыт после второго тега сценария.

0 голосов
/ 20 мая 2010

Использовали ли вы сброс браузера css . Разные браузеры имеют разные стили по умолчанию для различных элементов, CSS для сброса сбрасывает все эти стили по умолчанию, так что все выглядит одинаково во всех браузерах.

...