水平菜單顯示器在寬屏顯示器上顯示不正確

我對我爲網站實施的水平菜單有一個小問題。該菜單隻包含三個項目，但在相當大的寬屏幕顯示器上查看時，最後一個項目會摺疊到新的一行。由於我的客戶使用寬屏顯示器，所以我實際上無法對此進行測試，雖然我無法重現錯誤，但他們向我發送了此屏幕截圖。水平菜單顯示器在寬屏顯示器上顯示不正確

enter image description here

客戶端是在Windows 7上使用Internet Explorer 8，我已經測試了這個瀏覽器和操作系統正常尺寸的顯示器，這似乎努力。這似乎是問題的寬屏。

這裏是頁面的外觀我的屏幕上，和所有其他後續屏幕我測試過的。

enter image description here

這裏是我對菜單的代碼。

HTML

<div class="menu"> 
    <ul class="nav"> 
     <li class="nav-item" id="first-item"><a href="/why-us.php">WHY US</a></li> 
     <li class="nav-item"><a href="/links.php">LINKS</a></li> 
     <li class="nav-item"><a href="/contact.php">CONTACT</a></li> 
    </ul> 
</div>

CSS

.nav-item { 
    font-size:2em; 
    margin-left:175px; 
} 

.nav-item a { 
    color:#2B2F73; 
} 

.nav { 
    list-style-type:none; 
    padding:0; 
    margin:auto; 
    width:744px; 
} 

.nav li { 
    list-style-type:none; 
    float:left; 
    display:inline; 
} 

#first-item { 
    margin-left:0px !important; 
} 

.menu { 
    width:960px; 
    height:40px; 
    margin:auto; 
}

任何人都可以找出我的代碼中的任何明顯的錯誤可能產生這個錯誤？

來源

2011-05-23 Liam Spencer

我建議可以發佈您的代碼的一個活生生的例子，讓人們有寬屏顯示器和IE8能看看自己。也就是說，儘管沒有適當的顯示器，你可能有一種方法可以測試這個：你是否嘗試過使用CSS來給html標籤一個寬度爲1280px的寬度（或者其他一些寬屏尺寸）？如果你這樣做，會有水平滾動條，但內容應該全部按照寬屏幕的方式佈置和顯示。 – DavidJCobb 2011-05-23 09:38:13

這是一個聰明的想法，我會試試看。 – 2011-05-23 09:39:44

的問題是，他們已經得到了他們的「文字大小」設置爲「較大」（或者是「最大」）：

enter image description here

Your code is here，它看起來酷似客戶與截圖IE8中的「更大」文本。現在

可以重現該問題，你應該能夠解決這個問題。

我提供更好的指導，但很難不能夠看到整個網站這樣做。

「寬屏監視器」部分不相關 - 您在最外面的容器（.menu）上聲明width: 960px。無論屏幕寬度是多少，它都是960px。

來源

2011-05-23 09:41:42 thirtydot

謝謝你的回答，我已經設法重現錯誤，這對我來說已經足夠好了，因爲我現在可以自己解決問題。我將在未來的發展中銘記這一點。再次感謝。 – 2011-05-23 09:53:42

儘量減少.nav項，.nav一些寬度和。菜單

如果這不幫助你，那麼可以請你提供這何處被託管的鏈接。以便我們可以檢查並快速回復您。

來源

2011-05-23 09:32:30 user765671

-1

我建議你玩了一下你的寬度標籤。

如何刪除「nav」中的那個？

對不起，這是不是在這裏問的問題。這個問題很容易解決，你可以計算出自己，如果你試圖改變的東西......

我對這個問題的最好的建議是，你得到一個體面的工具來「測試」 CSS和看到的結果「活」。我很滿意Firefox/Chrome FireBug擴展（但它不保存結果，你必須複製&粘貼它）。

來源

2011-05-23 09:34:57 tiktak

如果你仔細閱讀了這個問題，你會注意到，除了客戶端寬屏顯示器外，它實際上可以用於我所做的所有測試。我無法訪問此監視器，因此想知道是否對這個問題有一個確定的答案，而這個問題不需要我去我的客戶辦公室並在那裏做這項工作！ – 2011-05-23 09:38:06

試試這個 .nav-item { font-size：2em; margin-left：5em; }

當然，如果Chrome（用戶的瀏覽器）太大地增加它們的文本大小，無論它如何使用ems，因爲它們當然是基於文本大小。

<subjective> 一般來說，它最好的做法是使用百分比來表示文本大小，並使用像素邊距/填充/距離來獲得瀏覽器之間的最佳一致性。

而且使用復位CSS（如YUI基本復位fonts.css）是一個好主意太 </subjective>

來源

2011-05-23 09:51:38 colinross

水平菜單顯示器在寬屏顯示器上顯示不正確

回答

相關問題