Question

我有可以按字母过滤的屏幕名称列表。我遇到的问题是，当浏览器窗口从1-5级别缩小时，z将换行到firefox中的nextline，并且几个字母将换行为chrome。在IE浏览器中放大了5个等级似乎没问题。以下是示例来源：

<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文件中，并在chrome和firefox中缩小（Ctrl-）五次。你会看到包装发生。我怎么能避免这个？我无法增加滤镜div的大小，我可以看到问题可能部分是由于chrome中的字体渲染造成的（在一定数量的缩放后它会停止缩小）。我对任何可能有效的javascript / Jquery黑客持开放态度。

Answer 1

我得到的唯一包装是Z在Firefox上以几个缩放增量进入一个新行。 Chrome和IE似乎对我很好。

你可以做的就是增加.letters类的宽度。

为了更好地控制.letters a标签的确切宽度，我可能会做的是将它们更改为float并明确说明宽度，如下所示：

<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>

HTML元素包装放大/缩小

1 个答案: