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中的背景大小百分比显示不同

回答

相关问题