2013-10-15 7 views
0

У меня возникли проблемы с тем, чтобы один и тот же элемент выглядел одинаково в Firefox и Chrome.Различия CSS между Firefox и Chrome

Этот скриншот как выглядит в Firefox (и как он должен выглядеть) - коробка с датой внутри).

Firefox - correct example

Этот снимок экрана, как это выглядит в Chrome.

Chrome - incorrect example

Я играл с Firebug, чтобы попытаться исправить это, но все, что я делаю, я не могу получить фон работать точно так же, как это делает на Firefox. Любой, кто может помочь с этим?

Страница: http://zachlockwood.com/wp - спасибо.

HTML/CSS для данного элемента:

.bit-events-narrow .bit-date .bit-event-data { text-align: center; text-transform: uppercase; font-size: 16px !important; background: #552412 !important; color: #f0f0e6 !important; line-height: 18px !important; padding-top: 8px !important; padding-bottom:5px !important; padding-left: 3px !important; padding-right: 3px !important; font-family: 'Conv_Haymaker' !important; height: 40px !important; width: 40px !important; } 

.bit-date { text-align: center !important; line-height: 20px !important; } 

.bit-date a { width: 50px !important; background: #552412 !important; } 

<td class="bit-date"> 
<a class="bit-event-data" href="http://www.bandsintown.com/event/7082285?app_id=wpjs_zachlockwood.com&artist=Zach+Lockwood&came_from=39" target="_blank" data-bit-event-id="7082285" style="font-family: 'Conv_Haymaker'; font-size: 16px; font-weight: 400; font-style: normal; color: rgb(240, 240, 230); text-transform: uppercase; text-decoration: none; letter-spacing: normal; word-spacing: 0px; line-height: 18px; text-align: center; vertical-align: baseline; direction: ltr; background-color: rgb(85, 36, 18); background-image: none; background-repeat: repeat; background-position: 0% 0%; background-attachment: scroll; opacity: 1; width: 40px; height: 40px; top: auto; right: auto; bottom: auto; left: auto; margin: 0px; padding: 8px 3px 5px; border-width: 0px; border-color: rgb(240, 240, 230); border-style: none; position: static; display: inline; visibility: visible; z-index: auto; overflow: visible; white-space: normal; clip: auto; clear: none; cursor: pointer; list-style: disc outside none; marker-offset: auto;">Nov 16</a> 
</td> 

** отметить, что HTML генерируется с помощью плагина BandsInTown, и это не было добавлено мной.

+1

Можете ли вы показать HTML и CSS для этого элемента здесь, пожалуйста? Проверьте [Что-то на моем веб-сайте или проекте не работает. Могу ли я просто вставить ссылку на него?] (Http://meta.stackexchange.com/questions/125997/) –

+0

его кровавый кошмар встроенных стилей (его сайт Wordpress), вы не хотите его видеть. моя догадка заключается в том, что для параметра '-webkit-margin-before-collapse' и' -webkit-margin-after-collapse' установлено 'collapse'. глядя на dev tools/firebug, есть много дополнительных стилей только для веб-китов, которые применяются по сравнению с Firefox. – PlantTheIdea

+1

добавить отображение: блок в теге привязки. – Miller

ответ

3

Похоже ваш a тег должен быть block

Попробуйте это:

.bit-date a { display: block!important; } 
+0

Что сделал трюк - спасибо! Отметьте это как ответ, как только время StackOverflow позволит мне. – rossautomatica

Смежные вопросы