1. 程式人生 > >IE相容border-radius的方法

IE相容border-radius的方法

讓IE6,IE7,IE8支援CSS3效果,是利用 VML 模擬。VML是The Vector Markup Language(向量可標記語言)

使用方法:
在html載入 PIE.js 指令碼,用IE專用的註釋。

<!--[if lt IE 10]> 
<script type="text/javascript" src="js/PIE.js"></script> 
<![endif]--> 

css樣式

.c{
    width: 200px;
    height: 50px;
    background: #BBFFAA;
    behavior
: url(PIE.htc)
; border-radius: 25px; }

在js中呼叫(已引入jQuery)

$(function() { 
    if (window.PIE) { 
        $('.rounded').each(function() { 
            PIE.attach(this); 
        }); 
    } 
});

需要注意的是:
* PIE.htc需要放在伺服器上執行,本地伺服器也可以
* 必須四個角同時是圓角,不能指定設定其中一個方向的圓角
* 當前元素用position:absolute/relative

定位,dom結構複雜會出現錯位情況
* 寬度自適應會出現垂直方向滾動條,用overflow:hidden去掉
* PIE.htc引入方法:

1 PIE.htc也放置在js目錄下,behavior: url(js/PIE.htc);css屬性放置在內部樣式中

這裡寫圖片描述

2 PIE.htc和html檔案在同一級目錄,behavior: url(js/PIE.htc);置於css外部樣式中

這裡寫圖片描述

在ie7瀏覽器執行如下

這裡寫圖片描述

相關推薦

IE相容border-radius方法

讓IE6,IE7,IE8支援CSS3效果,是利用 VML 模擬。VML是The Vector Markup Language(向量可標記語言) 使用方法: 在html載入 PIE.js 指令

解決IE瀏覽器 border-radius/box-shadow/gradient 不起作用 的相容問題

需要PIE.js檔案的引入 以及 behavior: url(路徑/PIE.htc); .southone{ width: 24px; height: 24px; border-radius: 50%; behavior: ur

ie相容es6,ie相容ES6的方法,包括箭頭函式,Promise,async,await

1. 使用es6語法(不包含Promise) script標籤的type的值設為text/babel <script type="text/babel"> const arr1=[1,2,3] const arr2=[...arr1] console.

怎麼讓ie相容es6,ie相容ES6的方法,包括箭頭函式,Promise,async,await

一、如下示例:使用es6語法(不包含Promise) script標籤的type的值設為text/babel <script type="text/babel"> const

border-radius IE8相容處理

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat

JS 下載檔案方法分享(解決圖片檔案無法直接下載和 IE相容問題)

場景簡介 由於業務需要,經常遇到下載各類檔案的需求,其中最頭疼的莫過於前端下載圖片了,直接給個圖片檔案地址會變成直接開啟圖片,而不是彈窗提示另存為,研究了下前端實現檔案下載最便捷的方法還是建立 a 標籤,寫入download 屬性實現點選下載,但這在 ie 瀏

設定了border-radius的元素overflow:hidden失效解決方法

父元素設定圓角、overflow:hidden之後,當子元素中設定了transform後,父元素的overflow:hidden在圓角的地方失效了,解決方法:父元素加:position:relative; z-index:1; 就可以了 demo程式碼如下: <!D

IE 相容模式下Jquery 出現appendChild 意外地呼叫了方法或屬性訪問。

IE 相容模式下 appendChild  意外地呼叫了方法或屬性訪問。 原因:在ie8以下的瀏覽器裡,操作一個DOM的非法屬性時會出現 例如: 1、操作了一個DOM不該有的屬性<input type="text" id="test"> 如果要改變這個dom的

IE相容問題之一:table--td設定背景顏色or背景圖片,border不能正常顯示(用的框架是layui)

一、問題 table在火狐、谷歌都能正常顯示,只有在IE中不能顯示邊框,無論是IE11還是IE8、IE9。如圖: 正常情況下: https://img-blog.csdn.net/20171027151128133?watermark/2/text/aHR0c

ie瀏覽器對border-radius屬性的支援小結

1. ie10,ie9支援border-radius屬性 2.ie10相容性檢視,ie8,ie7,ie6,不支援border-radius屬性 對於不支援圓角屬性的ie瀏覽器,可以通過引入ie-css3.htc或PIE.htc檔案來解決該問題。 在CSS檔案中引入ie-c

使用border-radius實現圓角,相容到IE6

在製作頁面的過程,我們經常會遇到div為圓角的情況,之前一直都是用圖片來實現圓角問題,現在我們通過一個htc檔案利用css就可以輕鬆的解決圓角問題啦,而且還可以相容IE6,是不是很棒呢?那就去親自體驗一下吧~~~ 注意:(一定要注意htc檔案的路徑,頁面根路徑)!

[JS]IE相容模式下會把後臺傳來的html或者xml標籤變成大寫的解決方法

在IE相容模式下, 後臺傳到頁面上的html程式碼或者xml程式碼, 標籤裡會變成大寫, 不符合W3C規範。 如點我吧 被變成 可以使用下面的方法來轉換為小寫 // 呼叫 htmlTxt = convert(htmlTxt ); // 這個方法可以把

新標籤border-radius和opacity相容各種瀏覽的處理辦法

1.首先來說border-radius,它可以相容目前的四大瀏覽器,但是不相容低版本的ie7,和ie8,解決辦法是引入pie.htc 2,接下來是opacity的相容性處理辦法,和border-radius一樣,目前的四大瀏覽器都支援,只有低版本的ie7和ie8不支援,

CSS3屬性之圓角效果——border-radius屬性

20px con 一半 正方 ace ring css key lpad 在css3之前,要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏:http://www.hicss.net/css-practise-of-image-round-box/)。

border-radius

最大值 round str 水平 jpg 100% lan .cn color border-radius設置 1. 水平和垂直方向的值保持一致:左上角 右上角 右下角 左下角 2. 水平和垂直方向的值分開,中間用/分開:(水平方向)左上角 右上角 右下角 左下角/(垂直方

關於table邊框,設置了border-collapse:collapse之後,設置border-radius沒效果

tle rate -c table tr ddd eight lap lang 重新 做項目遇到邊框需要設置圓角,然後發現在設置了border-collapse:collapse之後,border-radius:10px不起作用了,發現這個是css本身的問題,兩者不能混在一

css3基礎 border-radius 圓角的div

head back 博文 添加 doctype over nth 圖片 auth 禮悟:   公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。   

css3基礎 border-radius:50% div 圓形顯示的圖片

思考 src over css .cn chrome mage tps ima 禮悟:   公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。   

css3基礎 border-radius:50% img 圓形顯示的圖片

name sch img radius tle utf tps color type 禮悟:   公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。   

IE8兼容border-radius

pos flow 裝飾 test black clas relative ref net 通過 Can I Use ? 兼容性查詢可以了解到IE8是不支持border-radius屬性的,導致IE8下所有圓角都被打回了原形...很方罒ω罒 通過下載PIE.htc(下載)並