Question

我在http://jsfiddle.net/HtCrx/有一个示例布局，并希望修复缩放级别为25％或33％时出现的溢出问题。按钮可以在任何其他缩放级别上精确缩放，但在25％或33％时，按钮会溢出并覆盖其下方的元素。看起来它们在这些缩放级别上也会停止缩小。解决这个问题的最佳方法是什么？

HTML：

<div id="checks">
  <input type="checkbox" name="checkboxes[]" id="1" value="1" /><label for="1">One</label>
  <input type="checkbox" name="checkboxes[]" id="2" value="2" /><label for="2">Two</label>
  <input type="checkbox" name="checkboxes[]" id="3" value="3" /><label for="3">Three</label>
  <input type="checkbox" name="checkboxes[]" id="4" value="4" /><label for="4">Four</label>
  <input type="checkbox" name="checkboxes[]" id="5" value="5" /><label for="5">Five</label>
  <input type="checkbox" name="checkboxes[]" id="6" value="6" /><label for="6">Six</label>
  <input type="checkbox" name="checkboxes[]" id="7" value="7" /><label for="7">Seven</label>
  <input type="checkbox" name="checkboxes[]" id="8" value="8" /><label for="8">Eight</label>
  <input type="checkbox" name="checkboxes[]" id="9" value="9" /><label for="9">Nine</label>
  <input type="checkbox" name="checkboxes[]" id="10" value="10" /><label for="10">Ten</label>
  <input type="checkbox" name="checkboxes[]" id="11" value="11" /><label for="11">Eleven</label>
  <input type="checkbox" name="checkboxes[]" id="12" value="12" /><label for="12">Twelve</label>
  <input type="checkbox" name="checkboxes[]" id="13" value="13" /><label for="13">Thirteen</label>
  <input type="checkbox" name="checkboxes[]" id="14" value="14" /><label for="14">Fourteen</label>
  <input type="checkbox" name="checkboxes[]" id="15" value="15" /><label for="15">Fifteen</label>
  <input type="checkbox" name="checkboxes[]" id="16" value="16" /><label for="16">Sixteen</label>
</div>

<span id="text">
  <label style="font-size: 12px">Text:</label>
  <input type="text" id="line" name="names[]" size="56" />
</span>

<span id="toggle">
  <label style="font-size: 12px">Toggle:</label>
  <input type="radio" id="one" name="radios[]" value="one" /><label for="one">ONE</label><input type="radio" id="two" name="radios[]" value="two" checked="checked" /><label for="two">TWO</label>
</span>

CSS：

.ui-button .ui-button-text {font-size: 12px;}
#checks .ui-button {width: 140px; !important;}
#checks .ui-button {margin-bottom:3px; !important;}
#checks {position:absolute; top:0px; left:25px; height:120px; width:650px; border: 1px solid black;}
#text {position:absolute; top:140px; left:25px; height:50px; width:400px; border: 1px solid black;}
#toggle {position:absolute; top:140px; left:450px; height:50px; width:225px; border: 1px solid black;}

JS：

$("#toggle").buttonset();
$("#1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16").button();

为什么jQuery UI的按钮在低缩放级别下不能很好地缩放？

0 个答案: