2009-09-27 115 views
2

读线程 Input size vs width输入宽度VS textarea的宽度

我很清楚,我们不应该使用大小属性,但css样式之后。

跨浏览器CSS会为输入[text]和textarea显示完全相同的宽度是什么?

BTB,我试图

#idInputText, #idTextArea { 
font: inherit; 
width: 60ex; 

}

它是正确的吗?更好的解决方案?

在此先感谢您的帮助。

回答

1

文本输入元素的本地填充不同。您需要为输入元素和textarea元素和实验分配不同的宽度。

#form input.textfield { width:10em; } 
#form textarea { width:9em; } 

只抛出一些默认样式(我更喜欢ems)并弹出打开Firebug并通过更改大小值进行实验。

我通常会在<input type=text>上抛出一个class=textfield,所以我不打算用<input type=submit>或类似的。

+0

请注意,您可以针对'输入[类型=“文本”]',为好,以避免造型提交按钮(尽管它不适用于IE6)。 – 2015-03-10 16:26:37

2

通过首先应用CSS重置,您可能会在不同浏览器中获得更一致的结果。本文列出了一些很好的例子:

https://stackoverflow.com/questions/116754/best-css-reset

一旦你已经取消了对填充和利润的微妙浏览器的差异,然后60ex的你的主人宽度应允许输入排队。

+0

不幸的是,这个问题被删除了,但是这个链接到了www.css-reset.com,它有一些关于CSS重置的有用信息(令人震惊),因为我们穷人n00bs需要他们;)。 [链接](http://www.css-reset.com/) – Jaime 2013-03-13 17:32:27

0

我会避免一个通用的CSS复位,但使用这样的:

input[type="text"], input[type="password"], textarea { 
    width: 60ex; 
    margin: 0; 
    padding: 2px; /* it's best to have a little padding */ 
    border: 1px solid #ccc; /* gets around varying border styles */ 
    border-radius: 4px /* optional; for newer browsers */ 
} 

只要你在标准模式,而不是怪癖模式这应该能正常运行大多数浏览器。

注:

  • 的属性选择 - [type="text"] - 不要在IE6工作,所以你不妨选择一个类名来代替。
  • 不能让所有浏览器以完全相同的方式显示表单域。
  • 使用ex作为单位,虽然一个好主意,可能无法在固定像素宽度的环境中很好地工作。
0

使用像素而不是EM或pct值。不管基本字体大小如何,所有浏览器都是60px = 60px。

-1

填充左,右0像素

+0

这是什么? – hims056 2012-12-14 03:51:25

+0

请为您的答案提供更多背景信息。 – 2012-12-14 03:51:56

0

,我迟到了这个晚会,但在任何情况下运行到这一点,并需要使用前对宽度,我终于得到它的工作。

Textareas默认使用等宽字体为他们的字体家族。所以,你需要重写。这个CSS工作对我来说:

input[type="text"], textarea { 
    font-family: Arial, sans-serif; 
    border: 2px groove; 
    padding: 2px; 
    margin: 10px; 
    width: 35ex; 
} 

这里有一个小提琴证明:https://jsfiddle.net/Lxahau9c/