0

Situation: 3 buttons in our application's header row. Formatted like:

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

The <span> CSS has a background-image to display an icon (appx 20px square).

So, basically, you've got inline unordered list items that are the buttons. Each list item has a span (the icon) and a strong (the button label).

Now--2 computers/users. Same OS (Mac). Same browser (Chrome). Same website/URL. One user sees them as expected--which is, all of the list items are inline with each other, and then the content within the list items (the button and label) are also inline--button then label.

The other user sees the content within each list item as block (effectively). On the top line the icon is displayed. Then a break (not literal html break, just next line) and the button label is displayed below the icon. Their left margins line up.

I tried to reproduce on the 'working' list items by shrinking browser width to see if the buttons 'broke' to a smaller state at some point--they didn't.

The <li> display value is display: list item (width auto inherited). The <a> tag is display: block (width auto inherited). <span> is display:inline-block, with a coded width (24px) (not width auto or inherited width). The <strong> is also display: inline-block, width: auto (inherited).

What makes it worse is that the user seeing the wrong thing said it was normal Monday, wrong Tuesday.

Thoughts?

4

2 に答える 2

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 に答える
0

月曜日にバックアップをロードし、火曜日に「差分」を実行して何が変更されたかを確認する必要があるようです。以前は機能していたので、おそらくそれが実行されたプラットフォームのせいではなく、誰かが変更したためですあるブラウザでは解決でき、別のブラウザでは解決できないようなコード。バージョン管理が発明された理由は、ヒューマン エラーです。

それでも問題が解決しない場合は、XHTML と CSS を検証して、エラー構文が問題ではないことを確認してください。これらのバリデーターの目的は、有効な場合はコードが期待どおりに表示されることを保証することです。そうでない場合は、ブラウザーの製造元の責任であり、バグとして報告する必要があります。

http://validator.w3.org/

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

于 2012-08-08T16:26:40.577 に答える