DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css修正Input標簽在各種浏覽器中差異
css修正Input標簽在各種浏覽器中差異
編輯:CSS詳解     

首先,說明一下表單標簽(input、select)可能在各種浏覽器中的表現差異:

1.當input或select與其他標簽(例如a、label)混排時,可能出現不居中的問題。

2....混排時,外層標簽不能控制表單標簽。

3.input裡面輸入的文字行高存在差別,有空隙等等。

解析現象:
input:text特性時,
默認情況下:
1.Firefox高度height為16px;IE下高度為14px;
2.字體大小為:13.3333px;
3.input存在padding值:Firefox為:padding:1px 0;IE下為:padding:1px 0 3px 0;
解決實例:如下代碼:


<!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>無標題文檔</title>
<style type="text/CSS">
body {
    font-family:"宋體";
    font-size:12px;
}

table {
    border-collapse:collapse;
    border:solid red 1px;
}
td,th {
    border:solid red 1px;
    height:40px;
}
label {
    vertical-align:middle;
}
.inputtxt {
    width:200px;
    padding:0;
    font-family:"宋體";
    font-size:12px;
    height:15px;
    line-height:15px;
    vertical-align:middle;
    border:solid #0000FF 1px;
}

</style>
</head>
<body>
<form action="#" method="post">
<table>
    <tr>
      <th width="44">firt</th>
      <td ><input name="aj" type="text" maxlength="6" class="inputtxt" />
        <label>知</label>
      <input type="text" maxlength="6" class="inputtxt" /></td>
    </tr>
    <tr>
      <th>second</th>
      <td>
        <input name="bs" type="text" maxlength="6" class="inputtxt" /></td>
    </tr>
</table>
</form>
</body>
</Html>

這種情況下IE和Firefox都一樣了如下圖:

  input在浏覽器中的兼容性

字體樣式                     浏覽器高度表現
input        Firefox            IE6.0/IE7.0
宋體;12px      15px               13px
宋體:14px       17px              15px
宋體:16px       19px              17px

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved