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％

跨浏览器输入字段宽度未正确设置

1 个答案: