我正在尝试对输入元素使用绝对定位。壁虎/眨眼似乎忽略了“正确”样式(应强制使用宽度),而是将默认宽度应用于元素。使用div或span等其他元素不会发生这种情况。
我知道我可以通过添加可以适当放置的其他容器来解决此问题,但是我不必更改标记即可使用CSS。据我从规范中可以看出,这是一个错误,但是一些浏览器似乎是默认的,这是一个不错的错误。
我对规格有什么误解?如何在CSS中解决此问题?
<style>
.container {
position: relative;
height: 100px;
}
.container > * {
background-color: #FAA;
bottom: 5px;
left: 5px;
position: absolute;
right: 250px;
top: 5px;
}
</style>
<!-- this works -->
<div class="container">
<div>Foo</div>
</div>
<!-- this does not -->
<div class="container">
<button>Foo</button>
</div>
小提琴:http : //jsfiddle.net/t6o3jajr/4/
注意div和span如何随容器调整大小,但input和button却没有。
我不确定为什么它在某些元素上的行为会有所不同,但是您可以通过替换right: 250px;
为来解决此问题width: calc(100% - 250px);
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句