怎么用select打造全兼容各瀏覽器select

本篇內(nèi)容主要講解“怎么用select打造全兼容各瀏覽器select”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用select打造全兼容各瀏覽器select”吧!

在祥符等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都做網(wǎng)站、網(wǎng)站制作 網(wǎng)站設計制作按需定制網(wǎng)站,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,成都全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站制作,祥符網(wǎng)站建設費用合理。

我對select的height、padding、line-height分別利用控制變量的方法寫了個DEMO在各瀏覽器上測試三種情況：height.100.padding.0、height.no.padding.100、no.height.no.padding
 
我們可以得出以下研究屬性。 

 

ie6

ie7

ie8

ie9

ff

ch

sf

op

默認高度

22px

22px

  

19px

20px

19px

19px

height

F

T

T

T

T

T

F

T

padding

F

F

T

T

T

T

F

T

line-height

F

F

F

F

F

F

T

F

文字垂直居中

T

T

T

F

F

T

T

T


通過上述的研究成果屬性匯總，我們知道IE6是無論如何設置都是固定高度為22px不變的，而其他瀏覽器除safari都是支持height屬性的，那么我們設置 height:22px。那么現(xiàn)在我們修正一下safari瀏覽器，，我們發(fā)現(xiàn)僅有safari支持line-height屬性那么正好可以利用line-height修正其高度為22px,在font-size為12px的前提下設置 line-height:22px,最后FF和IE9里面的文字不居中，對其設定 padding:2px 0,我們發(fā)現(xiàn)FF和IE9都居中了，但是各個瀏覽器的select的高度也并沒有增加，那么這里有點疑問，在高度設定的情況下，小量數(shù)字的padding不增加整體高度？ 
下面是全兼容代碼示例。 

復制代碼

代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>demo</title> 
<style> 
*{padding:0; margin:0} 
body{font-size:12px} 
select{height:22px; line-height:18px; padding:2px 0} 
</style> 
</head> 
<body> 
<div style="margin-top:20px; margin-left:20px; background:#000"> 
<select> 
<option>演示問題一</option> 
<option>演示問題二</option> 
<option>演示問題三</option> 
<option>演示問題四</option> 
<option>演示問題五</option> 
</select> 
</div> 
</body> 
</html> 

到此，相信大家對“怎么用select打造全兼容各瀏覽器select”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

網(wǎng)頁標題：怎么用select打造全兼容各瀏覽器select
轉載來于：http://muchs.cn/article48/jsophp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、用戶體驗、建站公司、云服務器、網(wǎng)站建設、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化