XHTML 1.0 strict中文文本框和下拉菜单宽度不相等

Question

XHTML 1.0 strict中文文本框和下拉菜单宽度不相等

9

我将尝试使两个输入框（一个文本框，一个下拉框）具有相同的宽度。您可以通过CSS设置宽度，但由于某种原因，选择框始终比文本框小几个像素。似乎这只会在XHTML 1.0 strict文档类型中发生。对于此问题，您有任何建议或想法吗？

以下是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        .searchInput{
            width: 1000px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form action="theAction" method="post" class="searchForm" >
        <fieldset>
            <legend>Search</legend>            
            <p>
                <!--<label for="name">Product name</label>-->
                <input class="searchInput" type="text" name="name" id="name" value="" />
            </p>
            <p>
                <!--<label for="ml2">Product Group</label>-->
                <select class="searchInput" name="ml2" id="ml2">
                    <option value="158">INDUSTRIAL PRIMERS/FILLERS</option>
                    <option value="168">CV CLEAR COATS</option>
                    <option value="171">CV PRIMERS/FILLERS</option>
                    <option value="" selected="selected">All</option>
                </select>
            </p>
            <input type="submit"  class="search"  value="Show"  name="Show"  id="Show"  />
            <input type="reset" value="Reset" name="reset" id="reset" class="reset"/>
        </fieldset>
    </form>
</body
</html>

- boris callens

它们在我的Firefox 2中呈现出完全相同的宽度，你使用的是哪个浏览器？ - Adam Bellaire

我自己也注意到了这一点，并且对答案很感兴趣... - japollock

这看起来像是一个重复的问题，与https://dev59.com/nnVD5IYBdhLWcg3wR5ko相似，其中有几个你可以尝试的答案。 - Peter Hilton

关于浏览器：大多数浏览器都支持。 - Boris Callens

8个回答

3

这似乎与框模型有关，更具体地说，与边框有关。如果您正在使用Firebug，请查看布局选项卡...

选择器显示2像素的边框，0填充以及996像素的宽度和18像素的高度。
输入框显示2像素的边框，1像素的0填充以及1000像素的宽度和16像素的高度。

如果您将边框设置为零（并给它们一个背景颜色），则可以看到它们将具有相同的大小，这在布局选项卡中显示它们都是1000像素的宽度。

    .searchInput{
        width: 1000px;
        border: 0;
        background-color: #CCC;
        overflow: hidden;
    }

- enobrev

0

我在Firefox 2中遇到了这个问题，但在Firefox 3和IE7中似乎已经解决了。

我的解决方法是为select添加缺失的像素到一个单独的宽度中。

- Ross

0

浏览器在表单元素和样式方面往往会做自己的事情。CSS标准没有规定浏览器应该如何显示表单小部件，也没有规定应该允许用户更改哪些CSS属性。这在不同的浏览器之间以及同一浏览器中的不同表单小部件之间存在差异。

您可以尝试调整填充和边框以帮助不同的表单小部件匹配。

- Paul D. Waite

0

@Paul D. Waite - 我完全同意你的观点

CSS并不是用来做这个的。例如，在Safari中查看输入框。它们是椭圆形的。在某些情况下，CSS属性根本不适用。

在元素周围填充以使它们对齐。

- Allen Hardy

仅仅因为没有指定并不意味着CSS不能用来样式化它们。尽管有一些有效的反对意见，认为为了可用性而样式化元素是不必要的（按钮在任何地方都应该保持一致），但我认为宽度和高度在布局中是必不可少的，并且不会带来任何可用性威胁。 - Boris Callens

0

这确实是由于盒子模型，当#IE在文档类型中发现"strict"时会支持它。如果您将其更改为“传统”的文档类型，则一切都像通常一样行为...但并非按照CSS标准的方式。

CSS盒子模型规定，元素的宽度/高度不包括填充和边框宽度。因此，它们是额外的，并增加了元素的宽度，因此实际上比所需的要大。

- AKGhora

0

您说得对，确实有4像素的差距。输入框 (input) 的宽度为103像素，而下拉列表 (select) 的宽度为99像素。我不知道这是为什么，但您可以通过以下方式解决：

<style type="text/css">
    .searchInput {
        overflow: hidden;
    }
    select.searchInput {
        width: 101px;
    }
    input.searchInput {
        width: 97px;
    }
</style>

这真的很荒谬，如果有人知道为什么会发生这种情况以及如何防止它，我会非常感兴趣。

这个解决方法适用于Webkit和Firefox。在IE中，像素差异是不同的。

有趣的是，使用HTML doctype时它们通常是相同大小的。

- Vincent

-1

看起来只有添加了文档类型才会发生这种情况。已更正示例。

- boris callens

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Oxley · Accepted Answer

你可以尝试重置边距、内边距和边框，看看是否有帮助：

.searchInput {
    margin:0;
    padding:0;
    border-width:1px;
    width:1000px;
}