chrome v 32 - html元素大小问题

Question

铬32更新后,的宽度html的元件(input,select通过限定,..)css具有这些性质不工作:

position:absolute;
left:10px;
right:20px;

在chrome 31和所有其他浏览器中它都有效.

使用chrome 32来看这个

http://jsfiddle.net/EAkLb/7/

Answer 1

我想这就是 W3C 所说的渲染输入元素的正确方法（我说我猜，但我没有放置 W3C 规范链接，因为我没有找到它的官方链接）

一个简单的解决方法是创建具有绝对位置和 left 和 right 属性的容器 div，并在内部创建一个 width: 100%; 的输入。

<div class="container">
    <input type="text"/>
</div>

<style type="text/css">
    .container {
        position:absolute;
        left:10px;
        right:20px;
    }
    .container input {
        width: 100%;
    }
</style>

就像http://jsfiddle.net/pjK8s/1/

如果您需要放置填充，则需要将容器设置为看起来像输入并让输入透明

<div class="container">
    <input type="text"/>
</div>

<style type="text/css">
    .container {
        position:absolute;
        left:10px;
        right:20px;
        padding: 1px 8px;
        margin: 2px 0px;
        -webkit-appearance: textfield;
    }
    .container input {
        width: 100%;
        border: 0px;
        margin: 0px;
        padding: 0px;
        background: transparent;
        outline: none;
    }
</style>

就像http://jsfiddle.net/Vyj22/1/