Проблема с выравниванием CSS в Google Chrome

Question

У меня небольшая проблема с выравниванием с моей таблицей.Это происходит только с Google Chrome.Я хотел бы, чтобы мой флажок был выровнен со всеми флажками моей таблицы.В IE & Chrome все работает, пока я не добавлю таблицу css : исправлено; .Вы можете увидеть результат ниже.В Chrome флажок заголовка больше не соответствует другим флажкам в моей таблице.

Вот мой css:

table.search-results
{
  border-collapse: collapse;  
  table-layout:fixed;
  width: 100%;
}

table.search-results td.tipsy-empty { width: 5px;  }
table.search-results td.tipsy       { width: 5px;  }
table.search-results td.checkbox    { width:20px;  }
table.search-results td.favoricon   { width:20px;  }
table.search-results td.idaffaire   { width:50px;  }
table.search-results td.information { width:auto; white-space:nowrap; overflow:hidden; }
table.search-results td.username    { width:50px;  }

Любая помощь с благодарностью.

Answer 1

Использовать сброс CSS: http://developer.yahoo.com/yui/reset/

Похоже, что браузеры имеют разные настройки CSS по умолчанию для этих элементов.Всегда используйте сброс CSS, не позволяйте браузерам контролировать вас:)

Если вы используете закругленные углы Webkit, это также может быть проблемой.Обратите внимание, как цветные этикетки также выталкиваются.IE не поддерживает эти закругленные углы, поэтому они выглядят так, как должны.Проверьте Safari, держу пари, это ваша проблема.Найти не-CSS метод закругленных углов.Они могут быть немного уродливыми, но они предотвращают подобные вещи.