Question

是否可以使输入=“文本”框在交叉broswer解决方案中自动调整其宽度？在下面的示例中，文本框调整其宽度，使其达到“文本”文本。是否有任何crossbroswer解决方案（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

你能不能只使用自动？

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

#info{width: auto;}

输入=＆＃34;文字＆＃34;自动宽度（跨浏览器解决方案）

2 个答案: