CSS：文本位置在Mozilla瀏覽器中不正確

我的問題是，我在我的網站上有這些按鈕項目1，項目2等，現在框/按鈕元素內的文本位置在Chrome中正確的位置，但在Firefox它們會顯示一些問題，並將其放置在文本不能正確顯示的框的上方。CSS：文本位置在Mozilla瀏覽器中不正確

有人可以請幫助CSS或任何其他即時通訊出錯，以便我可以將文本框內的元素放在正確的位置。

<div class="contents grid_26 push_24"> 
      <ul class="ca-menu"> 
       <li> 
        <a href="#"> 

         <div class="ca-content lft"> 
          <h2 class="ca-main">Item 1<img src="images/image_1.png" width="22" height="22" class="arrow"></h2> 

         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 

         <div class="ca-content lft"> 
          <h2 class="ca-main">Item 2<img src="images/image_1.png" width="22" height="22" class="arrow"></h2> 

         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 

         <div class="ca-content lft"> 
          <h2 class="ca-main">Item 3<img src="images/image_1.png" width="22" height="22" class="arrow1"></h2> 

         </div> 
        </a> 
       </li> 
</div>

<style> 
.ca-main{ 
font-size: 14px; 
position: absolute; 
top: -17px; 
height: 80px; 
width: 120px; 
left: 70%; 
margin-left: -88px; 
opacity: 0.8; 
text-align: center; 
color: #fff; 
text-transform: uppercase; 
font-family: "Myriad Pro", "Trebuchet MS", sans-serif; 
} 

.container_24 .grid_26 { 
margin-top: -20px; 
} 

.container_24 .push_24 { 
margin-left: 0px; 
} 

.ca-menu li a{ 
text-align: left; 
width: 100%; 
height: 100%; 
display: block; 
color: #333; 
position: relative; 

} 

.ca-menu{ 
padding: 0 0 0 48px; 
margin: 62px auto; 
width: 1020px; 
cursor: pointer; 
} 

.ca-menu li{ 
top: 28px; 
left: -140px; 
width: 140px; 
height: 28px; 
border: 3px solid #333; 
overflow: hidden; 
position: relative; 
float:left; 
background: #fff; 
margin-left:-48px; 

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
/* -webkit-border-radius: 125px; */ 
-moz-border-radius: 125px; 
border-radius: 125px; 
} 

</style>

來源

2013-03-11 Abhi

您應該在發佈之前格式化並驗證您的代碼。你有HTML錯誤。這是一個清理起點：http://jsfiddle.net/2HYNA/ – isherwood 2013-03-11 19:29:41

什麼是80px高度？我會簡化你的風格，儘可能地去除絕對位置，你的麻煩可能會消失。所有這些負面利潤都是等待發生的頭痛。 – isherwood 2013-03-11 19:31:54

我不太確定你想要做什麼 - 但我很好奇，如果讓這些img標籤bg圖像反而會幫助你的事業 – mikevoermans 2013-03-11 19:34:30

我建議你試試這個：

.ca-menu li a { 
    text-align: left; 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
    color: #333; 
    position: relative; 
}

然而，建立菜單我建議你使用快魚。這是用動畫和完整的瀏覽器兼容性創造出色的交互式菜單的最佳方式。

我甚至會離開你的鏈接，使你的東西更容易：https://github.com/joeldbirch/superfish/

相信我，這是偉大的。看看我做了什麼：www.santz.net和santz.freeiz.com

我用這個插件開發了這兩個菜單，它很棒。

希望我已經幫助，任何懷疑聯繫我通過這裏或我的Facebook頁面。

來源

2013-03-11 19:58:08

首先是你缺少你的HTML的UL關閉標籤。

那麼你可能想在我們的風格上添加一個CSS重置。重置樣式表的目的是爲了減少瀏覽器在缺省行高，標題邊距和字體大小等方面的不一致性。

繼承人在CSS Tools: Reset CSS

來源

2013-03-11 19:29:50 pixeltracer

正確的，CSS重置是非常重要的......我推薦Eric Meyer的解決方案。 – 2013-03-11 19:59:49

你有position: relative;與left: -140px;各列表項，這是推動其140px視口的左側（外屏幕）的鏈接，因爲沒有其他元素都有一個位置屬性設置（在這種情況下，它相對於根<html>元素）

您還沒有清除漂浮的<li>元素，這就是爲什麼您的容器div沒有高度。浮動元素被從流中取出並且忽略它們，除非它們後面跟着一個其上設置了clear屬性的元素...

另外consider validating your page - 但我認爲上述兩個問題導致您提到的問題。你真的需要了解好CSS做法..

來源

2013-03-11 19:33:48 Adrift

我沒有得到你..所以應該做些什麼來使這個更好..sry bt我不知道如何糾正這兩個問題 – Abhi 2013-03-12 04:11:36

CSS：文本位置在Mozilla瀏覽器中不正確

回答

相關問題