Кросс-браузерные несоответствия с полями? - PullRequest
Новая
       38

Кросс-браузерные несоответствия с полями?

1 голос
/ 29 февраля 2012

У меня небольшая проблема с совместимостью с x-браузером (Chrome и FF) для текстовой области и полей.

Страница, о которой идет речь, находится здесь: http://www.mylesgray.com/contact/

The textarea в разделе «Сообщение», как вы можете видеть, отличается в FF от Chrome:

FF 11:

Firefox

Chrome 17:

Chrome

Вы можете видеть, если вы смотрите на нижний и правый края обеих линий Chrome идеально, но FF выглядит дальше в обоих направлениях, и я не могу понять почему ни в Firebug, ни в Chrome Dev Tools.

Кажется, это проблема webkit vs gecko, так как Espresso показывает то же самое, что и Chrome.

CSS для вышеупомянутого: 

.wpcf7-message {
    float: left;
    width: 26em;
    height: 12.3em;
    margin: 0;
}

.wpcf7-message textarea {
    resize: none;
    padding: 1em;
    width: 100%;
    height: 100%;
    margin-top: 1.1em;
    border: none;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

Любая помощь высоко ценится!

Майлз

Ответы [ 2 ]

1 голос
/ 29 февраля 2012

Скорее всего, это единицы измерения em, которые вы используете повсеместно для ширины, полей и отступов.Модуль em основан на размере шрифта, и webkit отображает шрифты немного иначе, чем геккон (один и тот же текст в webkit и gecko будет иметь разную ширину).

В качестве теста измените ширину CSS, отступы и поляк абсолютным px значениям и проверьте, устраняет ли это несоответствия.

0 голосов
/ 29 февраля 2012

Я бы сказал

Используйте blueprint css framework , это поможет вам решить такие проблемы с кросс-браузерными операциями и сэкономит много времени

поставляется с фиксированными файлами IE, 

<!--[if lt IE 8]>
 <link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
...