0

情况：我们应用程序的标题行中有 3 个按钮。格式如下：

<ul> class="menu dropdown clearfix">
    <li class="{buttonlabel}">
        <a href="#">
            <span> </span>
            <strong>{ButtonLabel}</strong>
        </a>
</li>

CSS有一个背景图像来显示<span>一个图标（appx 20px square）。

所以，基本上，你有作为按钮的内联无序列表项。每个列表项都有一个 span（图标）和一个 strong（按钮标签）。

现在--2 台计算机/用户。相同的操作系统（Mac）。相同的浏览器（Chrome）。相同的网站/网址。一位用户按预期看到它们——也就是说，所有列表项都彼此内联，然后列表项中的内容（按钮和标签）也是内联的——按钮然后是标签。

另一个用户（有效地）将每个列表项中的内容视为块。在顶行显示图标。然后一个中断（不是文字 html 中断，只是下一行）和按钮标签显示在图标下方。他们的左边距对齐。

我试图通过缩小浏览器宽度来重现“工作”列表项，以查看按钮是否在某个时候“中断”到更小的状态——它们没有。

显示<li>值为 display: list item（宽度自动继承）。标签是 display : <a>block （宽度自动继承）。<span>是 display:inline-block，具有编码宽度（24px）（不是宽度自动或继承宽度）。<strong>也是 display: inline-block, width: auto (inherited) 。

更糟糕的是，看到错误内容的用户说周一是正常的，周二是错误的。

想法？

4

2 回答 2

0

听起来您应该在星期一加载备份，并在星期二进行“差异”以查看发生了什么变化，因为它以前工作过，这可能不是运行它的平台的错，而是有人改变了代码使得一个浏览器能够解析它而另一个浏览器不能。人为错误是发明版本控制的原因。

如果这不起作用，请记住验证您的 XHTML 和 CSS，以确保错误语法不是问题。这些验证器的目的是确保如果有效，则代码将按预期显示，如果不正确，则为浏览器制造商的错误，应将其报告为错误。

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

于 2012-08-08T16:26:40.577 回答
0 
hai i think you initalize the class out of ul tag. so you put the class in inside ul tag.


<ul class="menu dropdown clearfix">
    <li class="{buttonlabel}">
        <a href="#">
            <span> </span>
            <strong>{ButtonLabel}</strong>
        </a>
   </li>
</ul>
于 2012-08-08T16:29:09.553 回答