Странная ошибка полей в Chrome 9

Я столкнулся со странной проблемой в Google Chrome 9: я указал левое поле для элемента ввода, но Chrome игнорирует его при загрузке страницы.

Однако, когда я открываю инструменты разработчика и отключаю это конкретное объявление, а затем снова включаю, поле применяется правильно.

Рассматриваемое правило:

margin: 8px 0 0 33%;

Я думал, что это может иметь какое-то отношение к микшерам, но с использованием:

margin: 1% 0 0 33%;

У меня точно такая же проблема.

Я заметил проблему только в Chrome, IE9 и Firefox 3.6 без проблем применяют поля.

Это известная проблема и как ее обойти?

Кстати, я использую Windows 7 Ultimate 64-bit, другие версии/операционные системы пока не тестировал.

Обновление: у меня точно такая же проблема с Chrome 9 в Linux/Ubuntu 10.10.


person jeroen    schedule 24.02.2011    source источник
comment
Как странно. Вижу, у вас есть пара бесполезных ответов :) Проблема возникает у меня с Chrome 9, но не с Chrome 11. Вот похожий вопрос Я пытался исправить это некоторое время назад. К сожалению, я думаю, он не содержит полезной информации, которая могла бы вам помочь.   -  person thirtydot    schedule 25.02.2011
comment
@thirtydot Забавно, я действительно могу щелкнуть любое другое (несвязанное...) правило стиля в инструментах разработчика, и оно перейдет прямо в нужное место...   -  person jeroen    schedule 25.02.2011
comment
Сейчас это исправлено? Или мой Chrome 9 вдруг решил больше этого не делать?   -  person thirtydot    schedule 25.02.2011
comment
@thirtydot Вместо этого я поставил поле на li. Проблема решена. Теперь чуть правее, грррррррр...   -  person jeroen    schedule 25.02.2011
comment
FWIW, у меня сейчас такая же проблема в Chrome 23 mac. :(   -  person jessica    schedule 14.12.2012


Ответы (4)


Я возился с css в firebug и обнаружил, что это работает:

margin-top:8px;
margin-left:33%;
person Will    schedule 24.02.2011
comment
Спасибо, я изменил это, но я все еще вижу кнопку слева при загрузке страницы. - person jeroen; 25.02.2011
comment
Как вы загружаете кнопку? Вы можете попробовать поместить его в <div> с margin-left:33%;. И держите margin-top:8px; на кнопке. - person Will; 25.02.2011
comment
Вы также можете попробовать margin-left:172px на кнопке, чтобы вам не пришлось смешивать единицы измерения. - person Will; 25.02.2011
comment
Кнопка находится в неупорядоченном списке, поэтому я решил проблему, давая поле li вместо кнопки. Спасибо за вашу помощь. - person jeroen; 25.02.2011

Вам нужно очистить поплавки, вы можете сделать это, добавив overflow:hidden к элементу UL, который обертывает LI.

#block_contact_form ul { overflow:hidden; }
person Seth    schedule 24.02.2011
comment
Спасибо, я добавил это, но при загрузке страницы по-прежнему отображается кнопка слева. - person jeroen; 25.02.2011
comment
Попробуйте добавить li в селектор #block_contact_form ul li { overflow:hidden }...странно, в Хроме, если его добавить, кнопка мгновенно прыгает. - person Seth; 25.02.2011
comment
@Seth это происходит потому, что вы добавляете его в инспекторе, и он повторно применяет стиль. На самом деле это не исправление, а то же самое, что отключение и повторное включение стиля. - person Phillip Copley; 17.12.2013

  1. установить position:relative для родительского элемента (например: li ИЛИ span )
  2. установите float:left (для левого направления) или float:right (для правого направления) для этого входа [type:button].
person Willy Smith    schedule 28.11.2012

Кажется, решение было найдено, но если решение css для такой ошибки невозможно, всегда можно попытаться установить css с помощью JQuery или простого javascript.

$(.button input).css({margin: 8px 0 0 33%});
person Stofke    schedule 24.02.2011
comment
Это тоже не работает, Стофке. Я сейчас столкнулся с той же проблемой. Для меня единственный способ обойти это — удалить overflow-x:hidden, объявленный в том же правиле. К сожалению, у меня нет других элементов, на которые я мог бы поставить правило... - person ; 19.03.2012