Question

将文本框（即输入类型=“文本”）和textarea的宽度设置为500px在IE6和Chrome中不起作用，只能在FF2（未测试其他浏览器），IE和Chrome会在文本框中添加两个像素。

使用

在所有元素上将填充和边距设置为0

*
{
margin: 0px;
padding: 0px;
}

将doctype从xhtml 1.0过渡到strict也不起作用。

Answer 1

您需要明确设置1px的边框并使宽度为498px，或使边框0和宽度为500px，尽管后者会使输入无法看到，除非您知道它在那里，所以从那里它只是一个造型问题。

Answer 2

在CSS中使用一组重置样式可能会有运气。它们大大有助于消除元素呈现方式之间的跨浏览器差异。

Eric Meyer（网络上最好的CSS之一）介绍了重置样式以及他使用here的原因 - 使用最新版本here。

也就是说，如果不知道你想要实现的整体效果，那么表单元素很难以一种在浏览器平台上完全一致的方式进行设计。祝你好运。：）

Answer 3

我使用CSS3使文本框和输入工作相同。 See jsFiddle。

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

适用于IE8 +，see caniuse。

Answer 4

我也认为问题出在边境。尝试专门为输入/ textarea定义边框样式及其宽度。

input，textarea { 边框：1px实心灰色; 宽度：498px; }

如果输入/ textarea未在其他地方或自己的标签中定义（例如大小或行/列），请查看源代码。 IE浏览器的其他选项是使用特殊的css文件。但是恕我直言，在你的情况下，它不应该是必要的。

Answer 5

我建议首先避免使用“星形”重置规则，因为它只会带来问题。而是喜欢像

这样的特定重置

ul，ol，p，blockquote，h1，h2 / iecc ../ {margin：0;填充：0; }

事实上，FORM ELEMENTs是明星规则造成最大伤害的地方。

AFAIK，将填充和宽度显式设置为textarea和input元素，将在所有浏览器中提供完全相同的像素宽度。

IE6确实为TOP和BOTTOM增加了1px的保证金，我相信，而不是双方。

这是一个RESET规则的例子，它不会破坏表单元素的默认属性：

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
    color:#303030;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }

/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

这些只是随机的，但你明白了。不要清除所有内容的边距和填充，清除所需内容会更安全，并将浏览器默认设置保留在其他位置。

Answer 6

我一直在尝试并发现文本输入和文本区域之间的“比率”可以使用21 * 8 * x来计算。

如果你有

＆LT; input type =“text”size =“X”/＆gt;＆lt; BR /＆GT; ＆LT; textarea cols =“X”＆gt;＆lt; / textarea的＆GT;

...并且您希望它们同样宽，使用此公式计算输入文本的宽度。

如果x = 70则为21 * 8 * 70 = 581px

所以你会写：

＆LT; input type =“text”size =“70” style =“width：581px”/＆gt;＆lt; BR /＆GT; ＆LT; textarea的 COLS = “70” ＆GT;＆LT; / textarea的＆GT;

两者将变得平等！

这样在程序/网站/等中你可以输入相同的值并获得相同的结果（在textarea中的cols）！

Answer 7

尝试

input{
border:none;
}

Answer 8

<!--***********************CSS**************************-->
<style>

.set_font

{

font-family:verdana;

font-size:10px;

color:#ffffff;

width:250px;

}

.set_font2

{

font-family:verdana;

font-size:10px;

color:#000000;

width:250px;

}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>

如何制作文本框和textarea相同宽度的跨浏览器？

8 个答案: