1. 首頁
  2. 問答
  3. 跨瀏覽器彎曲的邊界

跨瀏覽器彎曲的邊界

2010-05-08 50 views
11

什麼是實現跨瀏覽器（ff，即> 6，鉻合金，歌劇，safari）彎曲角落的最佳方式。我發現這篇文章http://jonraasch.com/blog/css-rounded-corners-in-all-browsers而且我是按照提示一步步多次，這裏是我的CSS：跨瀏覽器彎曲的邊界

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 

<!--[if lte IE 8]> 
<style> 
#content_wrapper{ 
behavior: url(template/css/border-radius.htc); 
border-radius: 20px; 
} 
</style> 
<![endif]-->

有人能指出我什麼我做錯了，或是否有更好的方法來達到同樣的效果，它在所有瀏覽器的工作除了在IE

來源

2010-05-08 Gandalf StormCrow

+5

IE6。真？真？ – 2010-05-19 15:28:23

+1

我以爲ie6已被棄用 – Kieran 2010-05-25 01:21:35

回答

17

如果這是HTML文件中未修改的片段，則很明顯爲什麼它不起作用：您在另一個<style>中使用<style>標記。

作爲第一個測試，只是嘗試更換整個片段（刪除IE特定塊！）：

#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
}

如果這樣的作品，你可以在IE特定部位移動到一個單獨的<style>：

<style type="text/css"> 
#content_wrapper{ 
    -moz-border-radius:25px 25px 25px 25px; 
    -webkit-border-radius: 25px; 
    -khtml-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#F2DADC; 
    border:25px solid #ECD3D5; 
    height:780px; 
    opacity:0.7; 
    width:747px; 
    margin:0px auto; 
    position:relative; 
    display:block; 
    zoom:1; 
} 
</style> 


<!--[if lte IE 8]> 
<style type="text/css"> 
#content_wrapper{ 
    behavior: url(template/css/border-radius.htc); 
    border-radius: 20px; 
} 
</style> 
<![endif]-->

如果仍有問題，請嘗試從谷歌網站上的例子zip文件：http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

來源

2010-05-13 15:27:17

3

從文章喲引文ü提到：

的路徑不同border-radius.htc作品可能比你預期，不像是相對於樣式背景圖片的路徑，這個路徑是相對於您從中調用CSS的頁面。

這就是爲什麼避免像上面這樣做的相對路徑是個好主意。

來源

2010-05-14 22:06:15 newtover

8

你可以把JQuery Curvy Corners用來做這一切的開箱代替。

來源

2010-05-17 14:01:08 Sarfraz

+2

當然，使用JavaScript進行造型......多麼可怕的建議。 – Seb 2010-05-20 00:36:28

+0

@Seb：如果有更好的跨瀏覽器解決方案，這首先不會存在。 – Sarfraz 2010-05-20 06:06:07

+0

@Sarfaz你知道有多少JS解決方案在那裏，不需要它的東西？它存在的事實並不意味着沒有更好的解決方案。事實上，在這個問題上看看正確的解決方案。 – Seb 2010-05-20 14:27:32

1

這裏是CSS：

.curved { 

-moz-border-radius:10px; 

-webkit-border-radius:10px; 

behavior:url(border-radius.htc); 

}

這裏是你將如何使用它，當然：

<div class="curved">Curvd div</div>

來源

2010-05-19 13:58:12 jessecurry

相關問題

 相關問題