0

我有一个固定宽度的文本框。我正在为浏览器兼容性而苦苦挣扎。当我在 Firefox 中修复宽度时，Chrome 显示不正确，它向右显示更多长度。

更新了我的代码

HTML

<form name="welcomeDiv1" id="welcomeDiv1">
<tr class="unsortable" >

<tr>
 <td>
<input type="text" class="textbox_form" name="content" id="content" />
</td>

<td>
<input type="text" class="textbox_form2" name="content2" id="content2"/ >
</td>

 <td>
 <input type="text" class="textbox_form3" name="content3" id="content3"/ >
 </td>

 <td>   
  <input type="text" class="textbox_form4" name="content4" id="content4" />
  </td>

<td>
<input type="text" class="textbox_form5" name="content5" id="content5"/ >
</td>

<td>
 <input type="text" class="textbox_form6" name="content6" id="content6" />
 </td>  

<td> <input type="submit" class="textbox_form7"  value="+"  name="submit" class="globalinsert_button"/></td>

  </tr>
 </form>

CSS

.textbox_form {
               margin:0 0 0 1px;
               width:162px;
               height:30px;
               background-color:#C2FFC2;
    }
    .textbox_form2 {
              margin:0 0 0 -3px;
              width:329px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form3 {
              margin:0 0 0 -3px;
              width:386px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form4 {
              margin:0 0 0 -3px;
              width:138px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form5 {
              margin:0 0 0 -2px;
              width:158px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form6 {
              margin:0 0 0 -2px;
              width:204px;
              height:30px;
              background-color:#C2FFC2;
    }
    .textbox_form7 {
             margin:0 0 0 17px;
    }

我需要将文本框放在所有浏览器中完全相同的位置。但它仍然是同一个问题

4

4 回答 4

2

您的样式属性未关闭，请检查。

尝试像这样单独的 css 样式：在每个文本框中添加类 'textbox_form'

<style>
    .textbox_form {
        margin-left: 5px;
        margin-top: 5px;
        width: 150px;
        background-color:#C2FFC2;
    }
    </style>

    <td>
    <input type="text" class="textbox_form" name="content" id="content" border:0px">
    </td>
于 2013-09-20T11:51:06.780 回答
0

首先，您的代码是无效的 HTML。和属性似乎已放在属性name中；这是错误的，并且使代码无效。这需要修复。idstyle

其次，我强烈建议为您的样式使用单独的 CSS 文件。这将帮助您避免重复，也可以更轻松地为相似的字段提供相同的样式。

[编辑] 上述两点现已在问题中得到解决。

最后，我对跨浏览器问题的最终原因的猜测是您的页面可能正在以 Quirks 模式呈现。如果您的页面在开始时没有有效<!DOCTYPE>的，它将进入怪癖模式，这将导致不同的浏览器以不同的方式呈现页面。修复此问题（以及您遇到的其他 HTML 错误），您将获得更好的跨浏览器一致性。

于 2013-09-20T12:02:59.090 回答
0

将box-sizing: border-box（连同其-moz-前缀对应项）设置为input[type="text"]. 这使得默认的浏览器主题填充等不会影响结果尺寸，并且还使元素遵循与和元素input相同的盒子模型（它们在大多数浏览器中默认为隐式），使表单样式更容易。selecttextareabox-sizing: border-box

于 2013-09-20T12:04:09.360 回答
0

您为内联样式做的标记错误。它应该是这样的：

<input type="text" style="margin:0 0 0 -3px; width:386px; height:30px; background:#C2FFC2; border:none" name="content3" id="content3" />

另外，使用外部 CSS 样式表！否则你会重复很多代码。

于 2013-09-20T11:36:25.947 回答