Wiem, że bugi w przeglądarkach to niewdzięczny temat, ale może ktoś będzie wiedział. Zwłaszcza, że być może to nie bug tylko brak mojej wiedzy.

Jest sobie prosty kod XHTML/HTML testowany w IE7:

[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <ul>
  6.             <li><span>span1:</span>reszta tekstu w li 1</li>
  7.             <li><span style="margin: 30px" class="data">span2:</span>reszta tekstu w li 2</li>
  8.             <li><span>span3:</span>reszta tekstu w li 3</li>
  9.         </ul>
  10.     </body>
  11. </html>
[HTML] pobierz, plaintext


efekt:



Zmieniam w kodzie jedną rzecz. Dodaje przed listą cokolwiek; element blokowy, element inline, pojedyncza literę a nawet spację. Nowy kod:

[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>cokolwiek
  5.         <ul>
  6.             <li><span>span1:</span>reszta tekstu w li 1</li>
  7.             <li><span style="margin: 30px" class="data">span2:</span>reszta tekstu w li 2</li>
  8.             <li><span>span3:</span>reszta tekstu w li 3</li>
  9.         </ul>
  10.     </body>
  11. </html>
[HTML] pobierz, plaintext


Efekt:


Jak widać, prawy margines drugiego elementu span zniknął. We wszystkich innych przeglądarkach normalnie. Słyszałem o bugach z marginesami w IE6, ale u mnie w IE7 tak to wygląda. Może to nie bug. O co chodzi?

Aha, i to class="data" mi się tam zawieruszyło. Ale zupełnie nie ma wpływu, na to o czym pisałem. Zresztą wkleiłem cały plik, nawet linka do arkusza css w nim nie ma.

P.S. W razie gdyby ktoś myślał, że zamknięcie bądź nie elementów <li> ma na to jakiś wpływ to niestety nie ma.

-----------------------------------------------
OK. Pomagam sam sobie i potomnym, którzy wygooglują ten temat. To jednak był bug.

Nie zwróciłem uwagi, że przy testowaniu miałem włączony w IE7 zoom na poziomie 110%. A stąd już blisko do rozwiązania. IE7 przy zoomie 100% wyświetla wszystko prawidłowo. Próba powiększenia to jednak straszne cyrki jeśli chodzi o elementy inline.

Problem częściowo rozwiązuje nadanie elementom <span> position: relative. To znaczy u mnie całkowicie rozwiązał, ale generalnie nie zawsze daje w 100% zadowalające efekty.