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

Question

是否可以在跨浏览器解决方案中使 input="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/