Firefox和Webkit中的背景大小百分比顯示不同

我有一個帶有背景漸變的響應式圓形div（使用％width，0 height，％padding-bottom和50％border radius）。如果背景大小被改變，他們不匹配的WebKit /火狐Firefox和Webkit中的背景大小百分比顯示不同

背景大小的100％/自動它們都匹配預期： Imgur Imgur

但是當我設置背景大小等尺寸不同（自動顯示200％圖像）。 Safari和Chrome按預期顯示圖像，但Firefox不。的Webkit： Imgur 火狐： Imgur

如果我設置的背景大小汽車300％它然後顯示正確的Firefox，但在隨後的WebKit太大。如果我使用-moz-background-size將Firefox設置爲不同的設置，則新版本只需使用background-size。

.glasses 
    display none 
    width 8% 
    height 0 
    padding-bottom 8% 
    border-radius 50% 
    position absolute 
    top 37.6% 
    z-index 3 
    transform none 
    background linear-gradient(135deg, rgba(234,246,254,1) 25%,rgba(10,39,58,1) 25%,rgba(10,39,58,1) 50%,rgba(10,39,58,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 50%,rgba(234,246,254,1) 75%,rgba(10,39,58,1) 75%,rgba(10,39,58,1) 100%); /* W3C */ 
    background-size auto 200% 
    background-position 0% 0% 
    transition none 
&.left 
    left 40.2% 
&.right 
    right 40.2% 
&:hover 
    .glasses 
     transition background-position 0.2s 
     background-position 0% -200%

來源

2014-04-16 Jack Wild

啊，跨瀏覽器的標準化。祝你好運！ –

我們可以看到你的代碼嗎？是父寬度設置，導致垂直％padding使用寬度作爲參考。，box-sizing inside？等等... –

@GCyrillus現在加了這個，對不起。父寬度是％。此外，他的規模和圓形div的形狀正在發揮作用。 –

設置

background-size: 200% 200%

代替：如果我使用-webkit-背景大小的WebKit設置爲較小的版本，他們還通過後臺-size屬性

STYL會被覆蓋

background-size: auto 200%

解決了這個問題，並在不同的瀏覽器上一致顯示。

來源

2014-04-16 20:58:54

Firefox中的背景大小也存在問題，但它是使用單個百分比值（例如background-size：200％）。使用兩個值也爲我解決了這個問題。爲了將來的參考，另外需要注意的是，Firefox不支持background-position-x和background-position-y（但在Chrome和Safari中它可以正常工作），在這種情況下，使用帶有兩個值的background-position（例如背景位置：100％100％）。 – Blizwire

Firefox和Webkit中的背景大小百分比顯示不同

回答

相關問題