不知道如何解決跨瀏覽器問題

任何人都可以幫助我解決一些跨瀏覽器問題嗎？我的網址是http://s423839726.onlinehome.us/index2.html。它在Firefox 13中看起來很好，但在IE9中，「聯繫人」按鈕全是無用的。不知道如何解決跨瀏覽器問題

另外，在哪裏學習如何解決跨瀏覽器的不一致問題？

來源

2012-07-24 hyphen

此外，我注意到在其他幾個瀏覽器中，我的社交鏈接位於徽標的頂部，未放置在我希望它們的左側。有任何想法嗎？ – hyphen 2012-07-24 18:58:51

你的問題非常含糊。您應該隔離具有不同行爲的代碼的具體示例並詢問這些代碼。 – Wug 2012-07-24 19:32:59

不一致也可以在Opera中看到。你的問題是UL元素。它掛在右邊的那個位置，因爲它顯示「inline」集並且包含一個零散的A元素。這種組合將您的聯繫人菜單元素向下移動一點。您應該嘗試清理標記，因爲它包含非必要的嵌套元素（主要是A元素）。另一個問題是，你正在混合左和右浮動。此外，您正在混合左側和右側填充以及可能導致瀏覽器行爲不同的填充，使計算更加困難，並可能導致邊緣問題崩潰。我建議你嘗試更多的語義標記您的菜單，如：

<ul id="topnav"> 
    <li><a href="about.html">About</a></li> 
    <li><a href="projects.html">Projects</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

，並用這個簡單的標記，你可以風格你的菜單。如果達到某一點，那麼在調整尺寸，填充和元素邊距不足以按照您想要的方式進行設計時，您可能會開始在LI或A元素中引入非語義元素（例如SPAN元素）以獲得更多方法通過CSS轉移事物。

讓您的導航風格變得簡單的方法如下：將每個LI浮動到左側並僅使用左邊距/填充來創建可視空間。

ul { 
    list-style-type: none; 
    height: 60px; 
    width: 300px; 
    margin: auto; 
} 

li { 
    float: left; 
} 

ul a { 
    padding-right: 32px; 
    padding-left: 32px; 
    display: block; 
    line-height: 50px; 
    text-decoration: none; 
    font-size: 40px; 
    color: #ccc; 
} 

ul a:hover { 
    color: #fff; 
}

就是這樣的。左邊框仍然丟失。你的整個菜單塊（UL）應該使用左邊填充或右邊浮動或其他方式定位到右邊。如果您想要減輕頁面上其他位置的UL和LI樣式的變化，請使用#topnav前綴選擇器。這只是一個簡單的例子，你不需要太多的標記或樣式就可以有一個你想要的水平菜單。簡單地開始並使用UL/LI在水平菜單上搜索教程。那裏有很多東西。祝你好運。

來源

2012-07-24 19:32:04 graste

不知道如何解決跨瀏覽器問題

回答

相關問題