html - chrome v 32 - html 元素大小问题

Question

chrome 32 更新后，html 元素的宽度(input, select,..) 由具有这些属性的 css 定义不起作用:

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

在 chrome 31 和所有其他浏览器中它可以工作。

用 chrome 32 看这个

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

Answer 1

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

一个简单的解决方法是创建具有绝对位置和左右属性的容器 div，并在内部创建一个宽度为: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/