关于box-shadow、border-radius不兼容ie8的解决办法
本來從css3兼容ie9+挺好的,可是總有一些共識要求ie8+,于是就有了我們的苦逼的找解決辦法。之前在網上查到一些說用 PIE.htc.
But 我就是按照他說的寫的沒有管用。請教了一下別人才會寫了。就我遇到的問題來說吧。
先說 box-shadow:
<style>
.div{
width:500px;
height:200px;
border:?
?
-moz-box-shadow:?0px 0px 14px 1px #eaeaea;
-webkit-box-shadow:?
?box-shadow:?
?
}
?
</style>
<div class="div">
? ?邊框陰影
</div>
?
可是ie8下不支持就加上PIE.htc,注意上邊的連接地址,需要注意的有兩點:
? ? 1.這個文件應該放到和.html文件同級位置。(下載地址:http://css3pie.com/download/)
? 這個就可以
?
? ? ?2.雖然文件名稱是大寫,如果確保路徑沒問題還不管用時候就試試小寫
?
border-radius:
這個是在做上傳頭像時候。就是不管你的頭像是什么形狀,放進去后就是圓的,類似于這樣
?
里邊的圖片就是這樣的,
同樣的
<style>
p{?
width:?135px;
?height:?135px;
border:??
text-align:?center;?
behavior:?url(pie.htc);
border-radius:??
overflow:?
?
}
</style>
<p>
<img src="images/ac1.jpg" alt="" width="232">
</p>
?
可是ie8下不支持就加上PIE.htc,注意上邊的連接地址,需要注意的有兩點:
? ? 1.這個文件應該放到和.html文件同級位置。(下載地址:http://css3pie.com/download/)
? 這個就可以
?
? ? ?2.雖然文件名稱是大寫,如果確保路徑沒問題還不管用時候就試試小寫
?最后找解決辦法的時候發現PIE.htc這個還是可以解決好多屬性值,因為沒用到就不一 一說了,有興趣的可以自己去查查。
介紹htc,它可以讓IE瀏覽器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA屬性。。(可以參考這個 https://zhidao.baidu.com/question/2119635727166906667.html)轉載于:https://www.cnblogs.com/zxhh/p/6825500.html
總結
以上是生活随笔為你收集整理的关于box-shadow、border-radius不兼容ie8的解决办法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: LUA Metatables
- 下一篇: ArcGIS 10.0 ArcGIS 9