HTML元素環繞放大/縮小

我有可以按字母過濾的屏幕名稱列表。我遇到的問題是，當瀏覽器窗口縮小到1-5級別的任何位置時，z將換行到firefox中的下一行，並且幾個字母將換行爲chrome。放大5個級別在IE中似乎沒問題。這裏是樣品來源：HTML元素環繞放大/縮小

<html> 
<head> 
    <style> 
    .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; } 
    .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange; } 
    .screenname {width: 244px; background-color: green; float: left; } 
    .filters .letters a { display: inline; margin: 0 14px 0 0; } 
    .filters .letters a.disabled { color: #36373a; cursor: default; } 
    .filters a { font: bold italic 12px/28px Arial, sans-serif; } 
    </style> 
</head> 
<body> 
    <div class="filters"> 
     <div class="screenname"> 
      Screen Name 
     </div> 
     <div class="letters"> 
      <a href="#" rel="#">#</a> 
      <a href="#" rel="A">A</a> 
      <a href="#" rel="B">B</a> 
      <a href="#" rel="C">C</a> 
      <a href="#" rel="D">D</a> 
      <a href="#" rel="E">E</a> 
      <a href="#" rel="F">F</a> 
      <a href="#" rel="G">G</a> 
      <a href="#" rel="H">H</a> 
      <a href="#" rel="I">I</a> 
      <a href="#" rel="J">J</a> 
      <a href="#" rel="K">K</a> 
      <a href="#" rel="L">L</a> 
      <a href="#" rel="M">M</a> 
      <a href="#" rel="N">N</a> 
      <a href="#" rel="O">O</a> 
      <a href="#" rel="P">P</a> 
      <a href="#" rel="Q">Q</a> 
      <a href="#" rel="R">R</a> 
      <a href="#" rel="S">S</a> 
      <a href="#" rel="T">T</a> 
      <a href="#" rel="U">U</a> 
      <a href="#" rel="V">V</a> 
      <a href="#" rel="W">W</a> 
      <a href="#" rel="X">X</a> 
      <a href="#" rel="Y">Y</a> 
      <a href="#" rel="Z">Z</a> 
     </div> 
    </div> 
</body>

現在提出，在一個HTML文件和縮小（按Ctrl - ）五次器和Firefox。你會看到包裝發生。我怎樣才能避免這種情況？我無法增加過濾器div的大小，並且我可以看到問題可能部分是由於chrome中的字體呈現引起的（它在一定數量的縮放後會停止縮小）。我願意接受任何可能適用的javascript/Jquery黑客入侵。

來源

2012-03-29 user92254225

這是真的那麼重要嗎？如果有人縮小了5倍，我相當肯定他們甚至無法讀取這些字母，如果它被包裹了，就更不用說了。 – Jordan 2012-03-29 02:41:09

如果這不重要，我不會浪費我的時間。幸運的是，別人花時間想出解決方案。 – user92254225 2012-03-29 03:22:45

我得到的唯一包裝是Z在Firefox上以幾個縮放增量進入新行。 Chrome和IE似乎對我來說工作得很好。

你可以做的事情是增加.letters類的寬度。

我纔能有在.letters a標籤的準確寬度更控制改變它們漂浮並明確規定寬度，像這樣大概做什麼：

<html> 
<head> 
    <style> 
    .filters { position: absolute; background: #ff0000 0 0 no-repeat; width: 970px; height: 31px; left: 0; text-transform: uppercase; } 
    .letters { float: left; margin: 2px 0 0 7px; width: 710px; height: 30px; background-color: orange; } 
    .screenname {width: 244px; background-color: green; float: left; } 
    /* flooat(710/27) = 26px */ 
    .filters .letters a { float:left; display:block; text-align:center; width:26px; } 
    /* fix offset */ 
    .filters .letters a:first-child { margin-left:8px; } 
    .filters .letters a.disabled { color: #36373a; cursor: default; } 
    .filters a { font: bold italic 12px/28px Arial, sans-serif; } 
    </style> 
</head> 
<body> 
    <div class="filters"> 
     <div class="screenname"> 
      Screen Name 
     </div> 
     <div class="letters"> 
      <a href="#" rel="#">#</a> 
      <a href="#" rel="A">A</a> 
      <a href="#" rel="B">B</a> 
      <a href="#" rel="C">C</a> 
      <a href="#" rel="D">D</a> 
      <a href="#" rel="E">E</a> 
      <a href="#" rel="F">F</a> 
      <a href="#" rel="G">G</a> 
      <a href="#" rel="H">H</a> 
      <a href="#" rel="I">I</a> 
      <a href="#" rel="J">J</a> 
      <a href="#" rel="K">K</a> 
      <a href="#" rel="L">L</a> 
      <a href="#" rel="M">M</a> 
      <a href="#" rel="N">N</a> 
      <a href="#" rel="O">O</a> 
      <a href="#" rel="P">P</a> 
      <a href="#" rel="Q">Q</a> 
      <a href="#" rel="R">R</a> 
      <a href="#" rel="S">S</a> 
      <a href="#" rel="T">T</a> 
      <a href="#" rel="U">U</a> 
      <a href="#" rel="V">V</a> 
      <a href="#" rel="W">W</a> 
      <a href="#" rel="X">X</a> 
      <a href="#" rel="Y">Y</a> 
      <a href="#" rel="Z">Z</a> 
     </div> 
    </div> 
</body>

來源

2012-03-29 02:44:14

是的，這就是我一直在尋找的東西。感謝您提供解決方案。 – user92254225 2012-03-29 03:19:10

HTML元素環繞放大/縮小

回答

相關問題