Проблема с вводом и привязками между браузерами - PullRequest
Новая
       19

Проблема с вводом и привязками между браузерами

0 голосов
/ 16 сентября 2009

У меня проблема с css и FF3 / IE7 и Opera 10.

У меня есть один вход [type = "submit"] и один якорь, и я хочу стилизовать их одинаково. Независимо от того, что я пытаюсь сделать, единственный логический браузер кажется Opera 10 (он стилизует их одинаково с тем же CSS).

FF, кажется, имеет разные отступы (мне нужно было бы иметь размер поля ввода на 1 пиксель меньше, чтобы соответствовать, но это отбросило бы Opera 10), а IE7 только что выключен.

код для любителей кода: 

<form action="/login" method="post" id="loginform">
    <fieldset>
        <input type="submit" value="Login" />
        <a href="/register">Register</a>
        <a href="/reminder">Lost Password?</a>
</fieldset>
</form>

CSS: 

fieldset a {
    color: #ffcc00;
    border: 1px solid #707070;
    background: #000000;
    font-size: 10px;
    font-weight: normal;
    padding: 2px;
    /*vertical-align: text-top;*/
}
fieldset a:hover {
    color: #ffcc00;
    border: 1px solid #707070;
    background: #333333;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
    text-decoration: none;
    padding: 2px;
}
fieldset input[type="submit"] {
    color: #ffcc00;
    padding: 2px;
    border: 1px solid #707070;
    background: #000000;
    font-size: 10px;
    font-weight: normal;    
}
fieldset input[type="submit"]:hover {
    color: #ffcc00;
    padding: 2px;
    border: 1px solid #707070;
    background: #333333;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
}

любая помощь в решении проблемы выравнивания между браузерами желательна, так как мне нужно поддерживать все три (сафари тоже, но я думаю, что если я выровняю эти 3, это тоже должно работать)

Большое спасибо заранее (p.s я собираюсь на ланч сейчас и проверю ответы сразу после того, извините за медленные ответы заранее)

Ответы [ 2 ]

1 голос
/ 16 сентября 2009

Проблема с Firefox решается следующим образом 

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}
0 голосов
/ 16 сентября 2009

Попробуйте это изолированно. Я рекомендую использовать файл reset.css, чтобы заставить все браузеры относиться к яблокам как к яблокам, а затем соответствующим образом оформить элементы INPUT и A.

Вполне возможно, что другие правила CSS входят в микс.

См. http://meyerweb.com/eric/tools/css/reset/ для файла сброса.

У меня были проблемы с прошлым с IE и стилизацией определенных элементов (в частности, отключенных элементов), и как IE отличается в своей обработке этого стиля между версиями 6 и 7.

Следующий DOCTYPE, похоже, помог в этих обстоятельствах, но рендеринг в IE 6 может больше не работать, как ожидалось: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...