跨浏览器输入字段宽度设置不正确答案

【问题标题】：Cross Browser input field width not setting properlly跨浏览器输入字段宽度设置不正确
【发布时间】：2013-04-24 16:13:11
【问题描述】：

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

我可以知道如何解决这种兼容性问题。

谢谢

【问题讨论】：

标签： html css google-chrome firefox cross-browser

【解决方案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 来包裹你的桌子，桌子被 retched 到 100%

【讨论】：