css3邊界半徑不工作的子元素

我試圖發展滑動框有邊界半徑在父div。它適用於Firefox，但在safari和chrome中遇到問題。css3邊界半徑不工作的子元素

問題是子元素重疊父div的舍入邊框。

您可以在http://jsfiddle.net/7KgEh/6/處看到示例。看看safari，chrome和firefox;您會在右側看到子div與parent div的圓形邊框重疊的區別。

我搜索了互聯網，但大多數帖子都指出它是webkit的bug。任何人都知道解決方案？

來源

2012-09-19 krozero

試試這個： http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera –

感謝，這是有點不同。 – krozero

看看jsfiddle.net/7KgEh/21。在這裏解釋screencast.com/t/vc65k0QK。它在Firefox中工作正常只是在鉻和Safari – krozero

如果不需要與後臺交互時，您可以只用z-index埋葬它：

http://jsfiddle.net/7KgEh/23/

埋葬的背景和動按鈕後成爲的兄弟它並編寫額外的行來保持對齊。如果這是爲了顯示目的，這將總體上更加靈活（也允許按鈕與插槽重疊）。如果有結構性原因，那麼另一種選擇可能會更好。

來源

2012-09-19 19:30:34

謝謝，那幾乎工作，但得到了另一個問題，我不能點擊I-Btn。現在它被父div覆蓋。當點擊I-Btn時有幻燈片動畫可用（幻燈片在jfiddle中不可用，只是假設）。 I-Btn應該可以點擊進行滑動工作。 – krozero

您需要將I-Btn分開，以便它不再位於盒子中，然後將它們一起動畫。無論您的動畫代碼是將它應用於這兩個元素還是編寫將一個事件附加到另一個事件的代碼。 –

下面是一個概念的快速證明：http://jsfiddle.net/7KgEh/26/ –

圓角正常工作，它只是採取width:100%（的頁面）爲<div class='box'>，因此你看不到它。嘗試width:50%，你會看到我在說什麼。這裏try this jsfiddle

來源

2012-09-19 18:44:36

不同的作用，如我上面所說，我試圖開發幻燈片框從右向左移動而不是內部div保持動態移動。可能這會更清楚地解釋。 http://jsfiddle.net/7KgEh/21/。這裏解釋http://screencast.com/t/vc65k0QK。它在Firefox中工作正常，只是在Chrome和Safari瀏覽器中工作方式不同。 – krozero

只需將overflow: hidden;添加到具有圓形邊框的容器元素即可。

來源

2012-11-24 16:44:53 arik

css3邊界半徑不工作的子元素

回答

相關問題