使输入="text"自动宽度(跨浏览器解决方案)

Question

是否可以在跨浏览器解决方案中使input="text"框自动调整其宽度？在下面的示例中，文本框调整其宽度，使其达到"text"文本。对此（IE6及更新版本）有没有交叉浏览解决方案？

jsfiddle：http://jsfiddle.net/P4Qd8/1/

HTML

<div id="wrapper">
    <div id="left">Label</div> 
    <div id="right">Text</div>
    <div id="middle">
        <input id="info" input type="text">
    </div>   
</div>

和CSS

#wrapper{height: 100px; width: 350px; border: 1px solid blue;}
#left{float:left;}
#middle{float:left;}
#right{float:right;}
#info{width: 100%;}

谢谢你抽出时间！

Answer 1

因为你的问题有JQuery标签，让我给你举一个例子。你可以用JQuery在IE中设置宽度，还没有在IE6中测试过（我不在乎，你也应该这么做），但它是JS，应该可以用。您只能在IE中加载它，并在CSS中操作该元素。

$(document).ready(function(){
    var width = $('#middle').width();
    var padding = $('#middle input').css('padding').replace('px','');//the padding defined in css
    var border = $('#middle input').css('border-width').replace('px','');//the border width
    $('#middle input').css('width', width-padding-border*2);
});

对此，我真的不明白你为什么说width: 100%在IE中不起作用，因为它应该起作用。

编辑：JSFiddle：http://jsfiddle.net/P4Qd8/4/

Answer 2

你不能直接使用auto吗？

#wrapper{height: 1em; width: 350px; border: 1px solid blue;}
#left{float:left;}
#middle{float:left;}
#right{float:right;}
#info{width: auto;}