HTML/firefox/webkit weird behaviour of '#id' links that alters page visual content

Normal page looks like this: http://hell.orts.ru:8004/snapboard/threads/id/3/

However, if …#fragment_id is used in the link, like http://hell.orts.ru:8004/snapboard/threads/id/3/#snap_post130, browser doesn't just scroll the page to that element, but visually alters (breaks) content of the page.

No javascript-effects, supposedly (at least the problem is still the same with NoScript).

What di I understand wrong, what actually happens and how to fix it?

Note: contents of the example links will certainly change in the future; I don't know where it would be ap开发者_运维百科propriate to save them as more permanent examples. Source code that produces those pages is here: https://bitbucket.org/hoverhell/xmppforum/src/c38dc011d15.

This looks like something called an incremental reflow bug. You can also trigger it by using View - Page Style - No Style and View - Page Style - Basic Page Style. But I don't know anything about what causes reflow bugs, you should file a bug.

I can't access the example web pages, but it's possible with the CSS 3 pseudo-class :target.

A simple example for a simple "tabbed page":

<style type="text/css">
  #tabs div {
    display: none;
  }
  #tabs div:target {
    display: block;
  }
</style>

<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>

<div id="tabs">
  <div id="a">Content A</div>
  <div id="b">Content B</div>
  <div id="c">Content C</div>
</div>

Demo: http://jsfiddle.net/UGwHH/