2013-02-21 65 views
0

任何線索? 嘗試pie.htc但它不工作圓角在IE中不是圓整的

.vjs-default-skin .vjs-big-play-button { 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border-radius: 25px; 
    behavior: url(bla bla/PIE.htc); 
    position: relative; 
} 

enter image description here

+0

問題是與CSS3pie最有可能的。 – Syren 2013-02-21 14:57:41

+0

順便說一句,它不工作,無論是在官方網站http://videojs.com/: -/ – Michel 2013-02-27 11:56:32

回答

0

它可以幫助告訴它期待像這樣IE9 +代碼瀏覽器:

<meta http-equiv="X-UA-Compatible" content="IE=9" /> 

(見Support for "border-radius" in IE

+0

謝謝,但沒有奏效。 :-( – Michel 2013-02-27 11:54:59

+0

您是否嘗試過我的解決方案?我目前在我的網站上使用它,它的工作原理就像是一種魅力。在這裏還有其他多種解決方案,它們並不直接與視頻-js鏈接。http: //stackoverflow.com/q/6130235/728053,http://stackoverflow.com/q/4692686/728053如果你不是我的粉絲,你可以嘗試一些解決方案 – Vagari 2013-03-16 02:38:22

0

我遇到過CSS3Pie相當多的問題。請閱讀Known Issues page以獲得完整的解釋,但我通常遇到的問題是與相對路徑有關,或者您的htaccess文件中沒有適當的.htc內容類型。

0

我認爲你有鏈接到你的「.htc」文件的問題。我有同樣的問題,並解決它與正確的鏈接到PIE.htc(我使用PIE.php,因爲這對我更好 - 這個文件包括PIE.htc和我沒有問題.htaccess文件)。 如果你的圓角在Firefox(例如)中工作,而不工作IE8和更老,那麼你必須在PIE文件的鏈接上有問題。您必須從使用圓角的文件(不是來自CSS文件,而是來自home.php)鏈接到htc文件。

但沒有代碼,測試頁面或類似的東西是測試它的問題,並說「你在這裏有問題」。

+0

如果我把完整的網址( http://localhost..../.../pie.htc),它應該工作,不應該嗎? – Michel 2013-02-25 12:10:06

+0

沒有Localhost你不僅在localhost上使用這個,我想我描述了我的情況和樹文件和文件夾:funkce(文件夾),css(文件夾),img(文件夾),slash_home.php(文件) - 一切與項目名稱在同一個文件夾中PIE.php(file - or PIE.htc if you don沒用得更好「。php「)我有裏面的文件夾」funkce「,我在slash_home中使用PIE,因此我使用」行爲:url(funkce/PIE.php);「因爲從文件slash_home.php我必須進入文件夾」funkce「文件PIE.php。 – 2013-02-26 13:12:17

+0

「behavior:url(funkce/PIE.php);」在本地主機上工作,如果你有同樣的文件樹,仍然在網上使用本地主機,你只有絕對鏈接,只能在localhost上運行, – 2013-02-26 13:18:53

0

你所看到的是IE 9,漸變背景和CSS3邊框的問題。在版本3.2.0中,在329行的默認樣式中,您可以找到Big Play Button (at start)的參考。 IE 9抓住了filter聲明。

background: #454545; 
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f)); 
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); 
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); 
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0); 
background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%); 

如果添加SVG圖像梯度和使用條件註釋擺脫了過濾器,你可以得到圓角邊框和一個漸變背景的。像Colorzilla's Gradient Generator可以幫助。

CSS:

background: #454545; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjNmM2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 51%, #3f3f3f 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(51%,#161616), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0); /* IE6-8 */ 

某處在你的HTML:

<!--[if gte IE 9]> 
<style type="text/css"> 
.vjs-default-skin .vjs-big-play-button { 
    filter: none; 
} 
</style> 
<![endif]--> 

希望有所幫助。

0

嘗試在CSS文件中聲明這一點,

溢出:隱藏