html - 跨浏览器输入字段宽度设置不正确

Question

chrome 和 firefox 等浏览器通常不设置输入字段宽度。请参阅下面的代码

 <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; 
  }

演示

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

解释

我添加了包裹你的表格的 div 并且表格缩小到 100%