2014-09-06 1 views
0

Когда мне нужно, чтобы ширина поля была меньше ширины дочернего элемента, хром и firefox не слушали меня, а Internet explorer заставлял ширину поля.Как заставить ширину fieldset меньше, чем дочерний элемент, используя jquery в chrome?

Вот мой 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> 

Chrome

enter image description here

Internet Explorer

enter image description here

+0

Вы могли бы дать скрипку также с css? – reyaner

+0

@reyaner Нет дополнительных css, как вы можете видеть. Вы можете увидеть результат в http://jsfiddle.net/pmmwmdLw/2/ –

+0

, устанавливая 'div' внутри' position: absolute; 'soluton для вас? – reyaner

ответ

0

Я не думаю, что это будет работать тогда.

Лучшее, что вы можете сделать, это положить второй 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); 
}); 

вы также можете создать оберточной DIV с jQuery ...