Размер текстового поля отличается в IE 6 и FireFox 3.6

Question

У меня возникают проблемы с размером текстового поля при просмотре в Fire Fox 3.6.

стилькак: .dat {font-family: verdana, arial, helvetica;размер шрифта: 8pt;вес шрифта: полужирный;выравнивание текста: слева;выравнивание по вертикали: среднее;цвет фона: белый;}

Размер текстового поля в Fire Fox немного меньше, чем в IE6.

Не уверен, почему IE6 и FireFox отображают текстовое поле разного размера.

Answer 1

Нормальная проблема при разработке для разных движков веб-браузера.Обратите внимание, что вам, возможно, следует разработать FireFox 3.6, а не IE6, потому что IE6 установил «старый браузер», который Microsoft больше не поддерживает.Измените свой код, чтобы он работал хорошо в FireFox, IE, Chrome, Opera.ищите больше информации в: https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Answer 2

с более полным объяснением, которое я только что должен был дать менеджеру;

IE6 был построен около 2000 года и в то время игнорировал несколько важных веб-стандартов. IE6 был своего рода «извлеченным уроком»; IE7 лучше следовать этим стандартам, а IE8 еще лучше.

Firefox был построен вокруг Netscape / Mozilla, и, что важно, они следовали общественным стандартам настолько, насколько могли. Firefox в основном ведет себя как Safari, Chrome, Opera и множество браузеров с крошечным рынком.

Предприниматель спрашивает: Итак, зачем поддерживать стандарт, а не IE, который является большим ребенком в блоке? Почти все наши клиенты используют IE!

Ответ: Потому что IE тоже медленно приближается к стандарту. Если мы поддерживаем Firefox, IE8 прост, и мы, вероятно, также получим IE7 практически без изменений. IE6 - это ложка дегтя здесь.

Если мы поддерживаем IE6 - исходное предложение - тогда IE7 - это особый случай, IE8 - это еще один особый случай, Firefox - особый случай и т. Д.

Если мы можем побудить пользователей отойти от IE6, это наш лучший вариант развития событий. Я считаю, что Microsoft официально прекратила всю поддержку, включая исправления безопасности, для IE6, когда Server 2003 SP1 прекратил поддержку, апрель 2009 . Google прекратил полностью поддерживать IE6, например, вежливо сообщая пользователям, что им нужно обновить «для полноценного использования сайта». Такие сайты, как IE6NoMore предлагают довольно приятное всплывающее окно CSS для тех, кто работает с IE6, предоставляя им несколько вариантов обновления.

Но в то же время, поскольку клиенты действительно используют его, IE6 остается здесь, и его проще - и удобнее обслуживать - строить в соответствии со стандартами и возвращаться к IE6, пока он не будет готов.

Answer 3

Вы не указали его ширину только потому, что хотите, чтобы он занимал 51 символ через атрибут размера.Я бы предложил удалить атрибут Size = "51" и добавить стиль ширины: 666px;

РЕДАКТИРОВАТЬ: после вашего комментария Во-первых, просто потому, что вы можете, это не значит, что вы должны.Правильный способ решения этой проблемы меняет все вашииспользовать класс css или ширину css для определения их ширины.

Однако следующий jQuery добавит стиль ширины к каждому типу ввода = текст, который имеет атрибут размера

jQuery(                            // on Document load 
    function($){                   // run this function 
    $('input[type=text][size]')    // find all input type=text with a size attr
           .each(                  // for each element found
        function(index, Element){  // run this function
            var size = $(this).attr('size');  // get size attrubte value
            $(this).width((size * 0.6)+"em"); // set the css width property to 
        });                                   // a nasty huristic
    }
);

Теперь, так какэто влияет только на входные данные с указанным размером, так как при касании каждой страницы вы можете удалить размер attr и заменить его размером Css, так что в конечном итоге вам не понадобится этот скрипт.

Answer 4

Попробуйте указать ширину в вашем CSS. Если это не работает, вы можете добавить звездочку в начало слова ширины в качестве второй записи, и она будет применяться только в IE6.

.dat
{
    width: 100px;
    *width: 105px; -- or whatever makes it look correct
}

РЕДАКТИРОВАТЬ: Спасибо за обновление специального символа.

Answer 5

Атрибут @size дает размер в символах.Однако, если вы не используете моноширинные шрифты, размер самого символа не является чем-то четко определенным.Кроме того, разные движки рендеринга могут использовать разные правила для интервалов между символами и / или кернинга.Итак, в конце атрибут не более чем неопределенный намек на браузер.

Вы пробовали что-то вроде style = "width:51em;" вместо этого?Не проверял, но свойство width хорошо поддерживается, поэтому я надеюсь, что это сработает.Вы также можете использовать абсолютные (пиксельные) единицы, если хотите более точный размер.

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