跨瀏覽器輸入字段寬度不設置properlly

Question

輸入字段寬度不commenly像Chrome瀏覽器，設置和firefox.see下面

<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%" style="margin-top: -90px;"> 
    <tr> 
    <td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td> 
    </tr> 
    <tr> 
    <td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td> 
    </tr> 
    <tr> 
    <td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td> 
    </tr> 
    <tr> 
    <td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td> 
    </tr> 
    <tr> 
    <td colspan="2">From</td><td colspan="2">To</td> 
    </tr> 
    <tr> 
    <td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td> 
    </tr> 
    <tr> 
    <td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td> 
    </tr> 
</table> 

CSS我的代碼。

.datefield { 
    padding:0; 
    margin:0; 
    width:80px; 
    height:20px; 
    } 

    .incident-type { 
    padding:0; 
    margin:0; 
    width:250px; 
    height:20px; 
    } 

我可以知道如何解決這種兼容性。

感謝

Answer 1

你的問題不是在輸入字段，但表規模，嘗試在演示

HTML

<div class="wrapper"> 
<table border="1" align="left" cellpadding="0" cellspacing="0" width="25%"> 
    <tr> 
    <td colspan="3"><input id="ir-box" type="checkbox"/>Only show LIVE reports</td><td></td> 
    </tr> 
    <tr> 
    <td colspan="3"><input type="text" value="Keyword Search"/></td><td>{% include "buttons/go.html" %}</td> 
    </tr> 
    <tr> 
    <td colspan="4"><input id="incident-types"class="incident-type" type="text" value="All Incident types" /></td> 
    </tr> 
    <tr> 
    <td colspan="4"><input id="location-types"class="incident-type" type="text" value="All Location types"/></td> 
    </tr> 
    <tr> 
    <td colspan="2">From</td><td colspan="2">To</td> 
    </tr> 
    <tr> 
    <td colspan="2" width="30"><input class="datefield" id="fromdate" type="text" value="dd/mm/yyyy"/></td><td colspan="2" width="150"><input class="datefield" id="todate" type="text" value="dd/mm/yyyy"/></td> 
    </tr> 
    <tr> 
    <td></td><td></td><td></td><td>{% include "buttons/go.html" %}</td> 
    </tr> 
</table> 
</div> 

CSS

.wrapper { 
    width: 400px; 
} 
.wrapper table { 
    width: 100%; 
} 
.datefield { 
    padding:0; 
    margin:0; 
    width:80px; 
    height:20px; 
    } 

    .incident-type { 
    padding:0; 
    margin:0; 
    width:250px; 
    height:20px; 
    } 

我的代碼

DEMO

http://jsfiddle.net/sqJyw/3/ 

說明

我加你的div表，表乾嘔了100％，其中包裝