디스플레이를 사용할 때 랜덤 파이어 폭스 문제 :

우리가 달성하고자하는 시각적 목표는 일부 링크가 여러 줄에 걸쳐 있지만 모든 링크가 수직으로 가운데에 있어야하는 가로 메뉴입니다.디스플레이를 사용할 때 랜덤 파이어 폭스 문제 :

준수하는 브라우저에서는 display : table을 사용하여 CSS를 통해이를 수행 할 수 있습니다. 샘플 마크 업 :

<ul> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link<br />spanning lines</a></li> 
    <li><a href="#">Link</a></li> 
</ul>

CSS :이 작동

ul { 
    display: table 
} 

ul li { 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a { 
    display: block; 
}

. 대부분의 시간. 어떤 사람들에게는 Windows 또는 OSX에서 firefox 3.x의 일부 버전을 사용하는 사람들이 있습니다. 초기 페이지로드시 LI가 다른 사람들보다 아래에 놓이게됩니다.

페이지를 새로 고침하면 99 %의 시간 문제가 해결됩니다.

버그를 재현하기 어렵습니다. 기껏해야 무작위로 보인다. 내 XP 시스템에서는 전혀 작동하지 않지만 OSX 시스템에서는 한 번만 팝업으로 나타날 수 있습니다.

시각 예 :

는 우리가 원하는 것을 :

link 1  link 2  link 3  link 4

우리는 가끔 무엇을 얻을 : 내가 건너 않았지만

link 1  link 2  link 3 
link 4

나는이 문제에 대한 많은 참조를 찾을 수 없습니다 여기 관련이있을 수있는 언급 :

아무도이 문제가 발생했거나 어떤 원인인지 알았습니까?

2010-04-22 DA.

[이 기사에 따르면] (http://blog.themeforest.net/tutorials/vertical-centering-with-css/), 사용중인 방법은 IE에서 전혀 작동하지 않습니다. 어쩌면 다른 수직 중심 기술을 사용하는 것이 좋습니다. –

저는 IE의 문제를 잘 알고 있습니다. o) 우리는 다양한 방식으로 IE를 수용합니다. –

사용자가 Firefox 3.5 또는 그 이전 버전을 사용하는 경우 HTTP 패킷 중단이 표의 중간에 오면 아마 https://bugzilla.mozilla.org/show_bug.cgi?id=148810이 될 것입니다.

onload 핸들러에서 테이블의 표시를 '없음'으로 전환하고 레이아웃을 플러시 (예 : document.body.offsetWidth)하여 디스플레이를 다시 ''또는 ''테이블로 설정할 수 있습니다. 꽤 아니지만 작동 할 것입니다.

물론 고대 파이어 폭스 버전에서 업그레이드 할 수있는 방법은 사용자와 사용자 모두에게 좋습니다. ;)

2011-04-23 03:47:18

답변