Firefox和Chrome之間的CSS差異

我有一些問題讓一個特定的元素在Firefox和Chrome中看起來相同。Firefox和Chrome之間的CSS差異

此截圖是它在Firefox中的外觀（以及它應該是什麼樣子 - 一個盒子，裏面有日期）。

Firefox - correct example

這張截圖就是它的外觀在Chrome中。

Chrome - incorrect example

我一直在玩螢火蟲，試圖修復它，但無論我做什麼，我不能讓後臺以同樣的方式工作，因爲它在Firefox瀏覽器。任何人都可以幫助這個？

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插件生成的，這不是由我補充道。

來源

2013-10-15 rossautomatica

您可以顯示該元素的HTML和CSS在這裏嗎？退房[我的網站或項目中的某些內容不起作用。我可以直接粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/） –

它的內聯樣式（它是一個WordPress站點）的血腥噩夢，你不想看到它。我的猜測是因爲'-webkit-margin-before-collapse'和'-webkit-margin-after-collapse'被設置爲'collapse'。查看開發工具/螢火蟲，與Firefox相比，應用了許多額外的僅webkit風格。 – PlantTheIdea

添加顯示：塊在錨標記。 – Miller

好像你a標籤應該是block

試試這個：

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

來源

2013-10-15 15:44:52

這樣做 - 謝謝！只要StackOverflow的時間限制允許我將其標記爲答案。 – rossautomatica

Firefox和Chrome之間的CSS差異

回答

相關問題