ie10，border-radius，overflow，position and hidden position：fixed child

我偶然發現IE10和IE9有些奇怪，不影響IE8：當border-radius，overflow和它的父級的位置被設置（參考jsfiddle示例）。如果其中一個屬性被禁用，則顯示固定元素。ie10，border-radius，overflow，position and hidden position：fixed child

<div style="position:relative; border-radius:5px; overflow:hidden;"> 
    <a style="position:fixed">fixed child</a> 
</div>

理想地，所有紅色框應該出現在該頁面的底部，從右到左。

在IE9和IE10上，第一個框被隱藏。

如果有人做了「全部選擇」，然後點擊頁面上的某處，就會出現第一個框出現。

我想知道如果任何人有任何解釋或鏈接解釋這個錯誤（如果這是一個錯誤，不是我沒有看到明顯）。

非常感謝您對此的任何反饋！

2013-11-26 arkhi

我可以證實這也發生在IE11中。我猜測它不影響IE8的原因是IE8不支持'border-radius'。 – Spudley

感謝有關IE11的提醒。我仍然希望在這裏或MS bug追蹤器上得到答案。 – arkhi

似乎是一個常見的問題：

幸運的是，有一個快速和骯髒的解決方案：只需將一個空未放置靜態<div></div>之前和/或後的絕對定位的元素。在固定示例中，標題後的空白 <div></div>可防止發生問題。

語義HTML的奉獻者會感到震驚，但我恐怕沒有似乎是一個CSS的唯一修復......除非有人知道嗎？

2013-12-03 23:57:54

我不認爲這是相同的錯誤，並且如上所述添加空白div不會改變OP的jsfiddle代碼中的任何內容。 – Spudley

在沒有其他任何人的有用的答案的，只有這樣，我已經成功地解決，這是添加額外的嵌套元素，並在兩個層分割成3種受災風格。

<div>  //style with position:fixed 
    <div> //style with overflow:hidden and border-radius 
    .... 
    </div> 
</div>

這並不理想，但它確實解決了這個問題。

爲了證明它的工作原理，這裏的一起test-1進行更改您的jsfiddle：http://jsfiddle.net/7Nydz/2/

2013-12-09 11:36:25 Spudley

這將確定工作。在我們（公司）目前的案例中，我們決定暫時忽略這個問題，因爲這個bug只會影響「很高興有但沒有必要」的功能。如果我們打算開展工作，我可能會使用您的解決方案。至於這個錯誤的原因，我會更新這個問題，如果我拿出別的東西或從其他地方得到任何答案。謝謝。 – arkhi

我想這個答案是高於其他投票，但在同一時間，沒有真正的解釋爲什麼現在。所以我願意刪除「被接受」的地位，但如果有人真的在尋找修補程序，那麼就不能這麼做。有沒有更聰明的方法來「不接受」，同時保持最高？ – arkhi

所以這只是一個想法，我不能測試它，因爲我在Mac上，並沒有一個Windows機器在手馬上。但是你有沒有試過在固定元件上使用clearfix？這將導致瀏覽器以不同的方式處理該元素，並在其後顯示其他內容。有一些運氣可能會出現？

它可能不起作用，但有時奇怪的事情發生。

2013-12-09 14:00:42 greenish

Clearfix通常是爲了解決浮動問題，所以我並不真正期待一個清晰的工作。我嘗試過，雖然只是爲了嘗試（'燒了一些蠟燭，巫毒有時與IE一起工作），並且......它沒有奏效。 :) – arkhi

哈哈thx嘗試！ :) – greenish

回答