Question

2周前我写了这部分html和css代码看起来像这样，它应该是正常的：

<div class="divclass1">
    <input type="text" class="inputclass1" />
</div>

.divclass1 {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 26px;
    background-color: blue;
}

.inputclass1 {
    position: absolute;
    left: 0px; 
    right: 0px;
}

div被填充（检查它是chrome），输入字段就像我想要的那样。现在，本周我再次测试我未更改的html代码（或者实际上，我正在测试一些后端代码，但这与此问题没有任何关系）突然，输入字段不再填充到他的父div了但是是默认宽度。它就像右边：0px没有与左边一起工作：0px，因为当我取消选中左边：0px;在chrome中，输入字段与右边对齐（但仍未填充）。此外，这个问题不仅发生在Chrome上，IE，FF，Opera也是如此。只有Safari正在显示输入框。

我添加了一个jsfiddle链接来演示问题：小提琴链接：http://jsfiddle.net/8ekbb/2/

我找到了一个解决方案（也包括在小提琴中），但我真的很想知道这个问题是否是一个bug，如果是这样，它会再次修复吗？或者现在它是否应该如此工作并且它是旧的它现在修复的错误？

Answer 1

您需要在css中仅使用或right或left，如果您的元素有top，则需要添加bottom或position:absolute位置：

.divclass1 {
    position: absolute;
    top:0;
    right: 0;
    height: 26px;
    background-color: blue;
    width:100%;
}

.inputclass1 {
    position: absolute;
    top:0;
    right: 0px;
    width:100%;
}

DEMO

为什么输入类型=文本的正确设置不再有效？

1 个答案: