Question

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

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

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

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

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

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

我尝试通过缩小浏览器宽度来重现“工作”列表项目，以查看按钮在某些时候“破坏”到较小的状态 - 他们没有。

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

更糟糕的是，用户看到错误的东西说周一是正常的，周二错了。

思考？

Answer 1

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

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

http://validator.w3.org/

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

Answer 2

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>

什么会导致这个按钮＆amp;文字不是内联的？

2 个答案: