Question

我注意到HTML中的<input>元素忽略了“左”和“右”属性的CSS对。对于“顶部”和“底部”对相同。请参阅以下示例代码：

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

<input>应占据浏览器中几乎所有空间（除了围绕它的10px边框）。它在Safari中运行良好，但在FireFox和IE浏览器中，<input>在浏览器的左上角保持较小。

如果我使用“left”和“width”，“top”和“height”，那么一切正常。但是我不知道宽度和高度是多少，我希望它们根据浏览器窗口的大小进行调整。

任何想法如何解决这个问题？

感谢。

Answer 1

您可以使用Wrapper DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

Answer 2

它不会忽略左侧或顶部，您会看到它确实位置10px。发生的事情是右边和底部都没有得到尊重。表格元素在布局引擎中有点特别对待，完全有可能FF / IE认为输入的宽度/最大长度更重要，我还没有真正研究过为什么会这样。

但这有点奇怪。也许你最好做的是查看<textarea>，它旨在提供一个大文本输入，你可以通过应用width: 100%; height: 100%;将其推到100％的维度，并处理10px的余量一个容器div。

WFM：

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

Answer 3

http://reference.sitepoint.com/css/bottom 说，关于Internet Explorer（＆lt; = 6）

不支持使用顶部，右侧，底部和左侧一起指定绝对定位元素的位置和尺寸;它们将使用指定的最后一个垂直和水平位置，并且需要使用宽度和高度指定尺寸

Answer 4

它在Safari中的外观不是它应该如何显示的方式。由于未指定高度值，input将默认为上次继承的字体大小的大小。

右侧和底部定位也将被忽略，因为您尝试同时设置顶部和左侧边距。看起来他们在这种情况下优先。

如果您需要使用input字段并在浏览器窗口的整个宽度和高度显示它时，您需要像这样重做CSS：

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

这会将input字段拉伸到用户拥有浏览器窗口的高度和宽度。它还将在浏览器窗口的10像素的每一边都有一个边距。

如果你必须有一个边距，那么在body样式或输入字段周围的包装器DIV中设置它。

html <input />元素忽略CSS左+右属性？

4 个答案: