铬v 32 - html元素的大小问题 [英] chrome v 32 - html elements size issue

问题描述

在chrome 32更新之后， html 元素（ input ，选择，..）
由 css 定义的这些属性不起作用：

After the chrome 32 update, the width of the html elements (input, select,..) defined by a css with these properties does not work:

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

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

In chrome 31 and all others browsers it works.

看看这个用chrome 32

Look at this with chrome 32

http：// jsfiddle。 net / EAkLb / 7 /

推荐答案

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

I guess this is what W3C says as the correct way of rendering input elements (I said I guess and I dindn't put the W3C spec link because I didn't found the official link for it)

一个简单的workarround是创建容器div使用绝对位置和左右属性并在宽度内创建一个输入：100％;

A simple workarround is to create container div with the position absolute and the left and right attributes and create an input inside with 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/

如果您需要填充比您需要将容器的样式设置为看起来像输入，并让输入是透明的

If you need to put padding than you need to style the container to looks like the input and let the input be transparent

<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/

这篇关于铬v 32 - html元素的大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！