Question

当我必须使fieldset的宽度小于它的子元素的宽度时，chrome和firefox不会听我的，而Internet Explorer会强制使用fieldset的宽度。

这是我的HTML代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Common/Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".full").each(function () {
                $(this).siblings().each(function () {
                    $(this).width(500);
                });
            });
            console.log($("#abc").width());
            console.log($("#def").width());
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset id="abc">
            <legend>fieldset 1</legend>
            <div style="width:600px;overflow:hidden;"></div>
        </fieldset>
        <fieldset id="def" style="width:500px;">
            <legend>fieldset 2</legend>
        </fieldset>
        <span class="full"></span>
    </div>
    </form>
</body>
</html>

铬

enter image description here

Internet Explorer

enter image description here

Answer 1

我认为这不会起作用。

你能做的最好的事情就是把第二个div作为换行，并设置他的宽度......

<fieldset id="abc">
    <legend>fieldset 1</legend>
        <div class="wrap" style="overflow:hidden;">
           <div style="width:600px;overflow:hidden;"></div>
        </div>
</fieldset>

然后：

$(this).siblings().each(function () {
    $(this).width(500).find("div.wrap").width(500);
});

您还可以使用jQuery创建wrap div ...

如何使用chrome中的jquery强制字段集宽度小于子元素？

1 个答案: