解決IE 7、8下的 object 框線問題
iframe 是最常見的網頁嵌入標籤,但到了XHTML 1.0 Stict 之下,這種標籤便不允許使用了。需要嵌入網頁,可以用object標籤取替之。
object標籤用途廣,除了可嵌入網頁、媒體外,還可取代 img標籤之用等。但IE對object的支援尚不完全,即使是開始支援網頁標準的最新版IE 8,仍有不完美的地方。
例如在取代 iframe 作為網頁嵌入上,標準瀏覽器下可以給object設定為border:none以去除框線,但在IE下是無效。IE的各個版本中,IE 6甚或較低版本的IE5.5可以改為通過在嵌入的網頁裡頭設定html與body為border:none,較高的兩個版本還不行,依然顯示礙眼的框線。
CSS | 標準瀏覽器 | IE 6 / IE5.5 | IE 7 | IE 8 |
---|---|---|---|---|
object { border:none } | Y | N | N | N |
html, body { border:none } | Y | Y | N | N |
下面各圖是在嵌入的網頁裡設定語法後的結果,其中overflow:hidden為隱藏捲軸。
![Firefox(其他標準瀏覽器同)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZIy_pb0Ccg1A1MoHOAIZL91uo7QnnJtowMpACUsAmlakXQpFxMhin3o3mYFhpAUrmNZ9ixWcNp0xM_XFKQGjTFDiYMH9WIyhCNVKxTqzPHJsEvLXHxP0-5iFFugLN-Yxh-tSRfUqZKKo/s0/firefox.png)
![IE 6 (IE 5.5 同)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolmZVtHWy2OkUFhjbDw5ZaiHmTs0Sln46WGmBFKfiW5QtbEr9tdHH4X2v6FG284Dhrnkp_mFBpg79AdwrfEL99p1M3JWClEe-RdvQOgarvkv-4Ekpj4r6eVnBouK28yxTpH5RYkteG4M/s0/IE6orIE55.png)
![IE 8](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_agdWiCvN0Fk5Yskn7gbeKJ2ABLLCvfTW4GlKEN41aXqcCzk08KHDHc6JjsoEecjR0KW4uEcdqBjOLU2Eri5qaG18sqyXDvC9kGWBcG08oQo35K2_h8n64XH6bhMvo2kuhf0rvKWfnE/s0/IE8.png)
![IE 7](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg33ut3Cu1bWageqjf7FELOHSw6jGUWD5x53tv9Ckd8AGGAeXfYGMDFpR6AMkSo6T02yJwZdxstP9AfmOjsC297YS1z59fl2ok1YL-tbl9jIENqAtEiwyzZ-j9R2Yleh8Xd3b7jzLZxPgg/s0/IE7.png)
針對 IE 7 和 IE 8 的問題,想出了使用 clip 屬性來對付頑固的框線,將那礙眼的東西裁切掉。
在設定裁切數值之前,先來看看框架語法:
<div>
<object type="text/html" data="嵌入的網址" width="300" height="200">
<p>閣下瀏覽器不支援此框架</p>
</object>
</div>
上面容器裡object 的寬為300,高為200,IE 7 和 IE 8 的每邊框線寬度皆為2px,那麼CSS裡clip的屬性值依上右下左順序設為:
object{
clip:rect(2px, 298px, 198px, 2px);
}
IE 8已支援兩個數值之間帶如上的標準逗號,而IE 7則只支援沒有逗號:
object{
clip:rect(數值 數值 數值 數值);
}
來說明一下上面的數值是如何計算得來的:
首先說說第一個數值,也就是上邊的數值,由邊框外緣的左上角為起點,向下移至2px位置裁切。(下圖1)
第二個數值為右邊,自左上角向右移至298px。(下圖2)
第三個數值為下邊,自左上角向下移至198px。(下圖3)
第四個數值為左邊,自左上角向右移至2px。(下圖4)
![圖一](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaJmgK7YqIkpo9BqDETrLZcacW2eEftUxnJG13L1VqnmgNhkQo3OOr1Fl9iS0LWF5OCeFgtdwJO6EbzrPPYxaOxAC9kHosEKc9NaiuYsKCctJlbWwokw5jZy2o47H0GWh39LiDMi_sihk/s0/clip-top.png)
![圖二](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO4epnrjNSGQieFY0oZ4NFW7-DcyNDDVK6VTMuUyYOfF3ctiQGg9hlPVxC0mgWFHvipWPt8eOjaQFD1oStWcfMq6YPAKXdEG_v8EuJawsM1JpXhAg6VdYK6qg2TFNlO1ZMWcwBe9Y0DB0/s0/clip-right.png)
![圖三](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimxYccydJSX01FoUbosIXoqTmFLqgdDeOtOg3mNGsFu62uSyiLvss7Ea4GbzyyaQyoBfTHbyKk3r6aqRKcOx0CRJUvGLVPiLrvOtT7vAuh0vkBHaE99NShoZjsmgtho1Oyd5d8hhGZdt4/s0/clip-bottom.png)
![圖四](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1J5LzoiFV7aEALNYgxHnbqYBBVLccDwhkjvJp8LCQO7b1xn65HGxEXxY2h9a1XwPJAOMCtn23nXUJbvUGWfx9-o41qKQyQ8gIFZb67B5yxAdkoeK05e3lHRROqt3ssIYSVdZsVwSbPA/s0/clip-left.png)
使用clip屬性時,必須同時使用「絕對定位」 方為有效,並給上一層的 div 設「相對定位」,如此「絕對定位」會以 div 為起點,不會跑到頁面的左上角去。
div{
position:relative; /* 相對定位 */
}
object{
position:absolute; /* 絕對定位 */
clip:rect(2px, 296px, 198px, 2px); /* 帶逗號為IE 8,IE 7 要不帶逗號 */
}
裁切後:
![IE 8](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsmhjd-K6x3AqyrdGmNiIiY2g2c9htWahAEBAFNC8aHO-DxdHt0nQsqSGnKd5-YC4wKV8Sx5h5w48IK4Jl7K7phv2zEsLsQv1-pc4-qg4Mev3oZq39q6JxF4fMcGsIPY0kVFcO9dp2hM/s0/IE8-after.png)
![IE 7](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWjN5Py5jKQX5xn-cJ22zIOzfq1XxDFbOY52Zh7tuCfGOEjal4qfEuWPqGfu6ofe37XcR5HC2HdjWHAAC82e5dpazYizXB0D3nrQO_evDd59r0mSXp_eikkQaS4HwHK9Q4FQ6MDLvNJ84/s0/IE7-after.png)