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规范链接，因为我没有找到它的官方链接）

一个简单的workarround是创建具有绝对位置和左右属性的容器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/

中

chrome v 32 - html元素大小问题

1 个答案: