不等于HTML文本框和下拉宽度与XHTML 1.0严格

我想有两个输入（一个文本框，一个下拉）具有相同的宽度。您可以通过CSS设置宽度，但出于某种原因，选择框总是小几个像素。似乎这只发生在xhtml 1.0严格的文档类型关于原因/解决办法的任何建议/想法？不等于HTML文本框和下拉宽度与XHTML 1.0严格

具有以下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>

来源

2008-10-02 Boris Callens

它们为我在Firefox 2中呈现的宽度完全相同，您使用哪种浏览器？ – 2008-10-02 12:09:18

我已经注意到了这一点，并且会对这个答案感兴趣... – japollock 2008-10-02 12:12:59

至于什么浏览器：大多数。 – 2009-03-02 15:10:10

你说得对，是有区别4PX。 input出现在103px宽，而select出现在99px宽。我不知道为什么发生这种情况，但你可以解决它是这样的：

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

这真的很愚蠢，我会很感兴趣，如果有人知道为什么这是怎么回事，和方法，以防止它。

Webkit和Firefox的解决方法。 IE中的像素差异不同。

有趣的是，他们通常会使用HTML文档类型相同的大小。

来源

2008-10-02 12:08:37

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

我的修复是将缺失的像素添加到单独的宽度为select。

来源

2008-10-02 12:09:59 Ross

-1

似乎只有在添加了doctype的情况下才会发生这种情况。更正了这个例子。

来源

2008-10-02 12:27:16

浏览器倾向于在表单元素和样式方面做他们自己的事情。 CSS标准没有指定浏览器应该如何显示表单小部件，也不指定应该让用户更改哪些CSS属性。它在浏览器之间以及同一浏览器中的不同表单小部件之间有所不同。

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

来源

2008-10-02 13:31:54

@保罗D.韦特 - 得到了与你有

同意这不是CSS是为。例如，查看Safari中的输入框。它们是椭圆形的。 CSS属性在某些情况下不适用。

在你的元素周围填充排列。

来源

2008-10-02 16:21:49

你可以尝试重置边距，填充和边框来看看是否有帮助：

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

来源

2008-10-03 14:58:33

这似乎有什么东西做的盒子模型。更具体地说，它似乎与边界有关。如果您使用的是萤火虫，请检查布局标签...

该选择显示2px边框，0填充和996px的宽度和18px的高度。
输入显示2px边框，1px 0填充，宽度为1000px，高度为16px。

如果将边框设置为零（并为它们指定背景颜色），则可以看到它们的大小相同，这表明它们在布局选项卡中的宽度均为1000px。

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

来源

2008-10-03 21:41:02 enobrev

这是由于Box模型的缘故，#IE在doctype中找到“strict”时支持。如果您将其更改为“传统”文档，则一切行为都会正常进行......但通常不会按照CSS标准进行。

CSS框模型指出，在元素的宽度/高度中，不包括填充和边框。所以它们在元素的所提到的宽度之上是额外的，因此实际上比期望的大。

来源

2009-02-21 13:48:49

不等于HTML文本框和下拉宽度与XHTML 1.0严格

回答

相关问题