Question

<input name="txtId" type="text" size="20" />

或

<input name="txtId" type="text" style="width: 150px;" />

哪一个是最佳的跨浏览器代码？

当然这取决于要求，但我很想知道人们如何决定以及基于什么。

Answer 1

您可以同时使用两者。 css样式将覆盖支持CSS的浏览器中的size属性并使字段具有正确的宽度，对于那些不支持CSS的字段，它将回退到指定的字符数。

修改：我应该提到size属性不是一个精确的大小调整方法：according to the HTML specification，应该引用输入将能够一次显示的当前字体的字符数。

但是，除非指定的字体是固定宽度/等宽字体，否则不保证指定数量的字符实际可见;在大多数字体中，不同的字符宽度会不同。 This question对此问题有一些很好的答案。

下面的代码段演示了两种方法。

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Answer 2

我建议，可能最好的方法是在em单元中设置样式的宽度:)所以对于20个字符的输入大小，只需设置style='width:20em'：）

Answer 3

size在不同的浏览器及其可能的字体设置中不一致。

px中设置的width样式至少是一致的，模box-sizing issues。您可能还想在'em'中设置样式，如果您想要相对于字体调整它的大小（但是，除非您明确设置输入的font族和大小），否则这将是不一致的，或'％'如果你正在制作液体布局形式。无论哪种方式，样式表都可能比内联style属性更好。

size仍然需要<select multiple>来获得正确排列选项的高度。但是我不会在<input>上使用它。

Answer 4

我想说这违背了“传统智慧”，但我通常更喜欢使用尺寸。造成这种情况的原因恰恰是许多人不这么说的原因：根据字体大小，字段的宽度因浏览器而异。具体来说，无论浏览器设置如何，它总是足以显示指定数量的字符。

例如，如果我有一个日期字段，我通常希望字段足够宽，以显示8或10个字符（两个数字的月份和日期以及两位或四位数年份，带分隔符）。设置size属性基本上可以保证整个日期可见，浪费的空间最小。类似地，对于大多数数字 - 我知道预期值的范围，因此我将size属性设置为正确的位数，如果适用，还加上小数点。

据我所知，没有CSS属性可以做到这一点。例如，在em中设置宽度是基于高度而不是宽度，因此如果要显示已知数量的字符，则不是非常精确。

当然，这种逻辑并不总是适用 - 例如，名称输入字段可以包含任意数量的字符。在这些情况下，我将回退到CSS宽度属性，通常是px。但是，我会说我制作的大多数字段都有某种已知的内容，通过指定尺寸属性，我可以确保大多数内容 most 案例，显示没有剪辑。

Answer 5

我刚刚与一张桌子进行战斗，无论我试图使哪个元素变得更小，我都无法做到更小，桌子的宽度保持不变。我使用firebug搜索但是找不到设置宽度如此之高的元素。

最后，我尝试更改输入文本元素的大小属性并修复它。由于某种原因，大小属性过度使用了css宽度。我正在使用jQuery动态地向表中添加行，而这些行包含输入。因此，当使用appendTo（）函数动态添加输入时，可能最好将大小属性与宽度一起设置。

Answer 6

HTML控制元素的语义含义。 CSS控制页面的布局/样式。在控制布局时使用CSS。

简而言之，绝不要使用size =“”

Answer 7

如果使用宽度（第二个示例），您将获得更多一致性。

Answer 8

您可以使用样式和宽度来调整文本框的大小。这是它的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

使用align将文本框居中。

Answer 9

HTML中的size属性和CSS中的width属性都将设置<input>的宽度。如果要将宽度设置为更接近每个字符的宽度，请使用**ch**单位，如下所示：

input {
    width: 10ch;
}

输入大小与宽度

9 个答案: