位置固定的圓形圖像 - css

我試圖在chrome和mozilla中修正位置固定的圖像，但它在某種程度上失敗了。位置固定的圓形圖像 - css

這裏是我的CSS： -

.circular{ 

    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    border-radius: 150px; 
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
    border: 5px solid white; 
    overflow: hidden; 
    position: fixed; 
    height: 100px; 
    width: 100px; 
    left: 80px; 
    top: 20px; 
}

這裏是我的html： -

<div class='circular'> 
       <div class='round-image'> 
       <img alt="Portfolio_page" src="/assets/portfolio_page.png" /> 
       </div> 
      </div>

這是兩個結果在瀏覽器和Mozilla： - mozilla view chrome view

它出現得很好，直到我沒有放置位置：固定並給出具體的高度和寬度

來源

2013-07-20 Dev R

什麼Chrome瀏覽器版本？似乎對我來說工作得很好。 – Malcolm

同樣在這裏，我的版本也能正常工作（v28） – Sourabh

如何查看版本？ –

嘗試添加：

.circular img { 
    position: static; 
}

如果不工作：

.circular{ 
    -webkit-transform: translateZ(0); 
}

我注意到，我可以得到同樣的問題，如果IMG是位置：固定的。也許它在某種程度上繼承了windows版本的chrome。變換可以強制重繪可能也解決它

信用爲轉變觀念：Chrome rendering issue. Fixed position anchor with UL in body

來源

2013-07-20 19:21:35

它不能正常工作 –

Arg ..值得一試..也許嘗試img本身的轉換或作爲遠射試試zindex：-1對img –

位置固定的圓形圖像 - css

回答

相關問題