什麼會導致此按鈕和文本不內聯？

情況：我們應用程序標題行中的3個按鈕。格式化像：什麼會導致此按鈕和文本不內聯？

<ul> class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
</li>

的<span> CSS有一個背景圖像來顯示的圖標（20像素APPX正方形）。

所以，基本上，你有內聯無序列表項是按鈕。每個列表項目都有一個跨度（圖標）和一個強大的（按鈕標籤）。

現在 - 2臺電腦/用戶。相同的操作系統（Mac）。同一瀏覽器（Chrome）。相同的網站/網址。一個用戶按預期看到它們 - 也就是說，所有列表項都是相互內聯的，然後列表項（按鈕和標籤）中的內容也是內聯 - 按鈕然後是標籤。

其他用戶將每個列表項中的內容視爲塊（有效）。在第一行顯示圖標。然後休息（不是文字html斷開，只是下一行）和按鈕標籤顯示在圖標下方。他們的左邊緣排隊。

我嘗試通過縮小瀏覽器寬度來查看「工作」列表項是否在某個時間點處於較小狀態 - 它們沒有。

<li>顯示值爲display：list item（width auto inherited）。 <a>標籤是display：block（width auto inherited）。 <span>是顯示：內聯塊，帶有編碼寬度（24px）（不是寬度自動或繼承寬度）。 <strong>也顯示：inline-block，width：auto（繼承）。

更糟糕的是，用戶看到錯誤的事情說週一是錯誤的，週二是錯誤的。

的思考？

來源

2012-08-08 Mike Earley

支票在每個瀏覽器的開發者工具，看看什麼是引擎蓋下回事。 – 2012-08-08 16:22:58

'display：list-item'不是默認的垂直對齊項目嗎？這不需要內聯或內聯塊嗎？ – Chris 2012-08-08 16:26:49

馬克B，當然，我做到了。我實際上並沒有能夠重現這個問題（一行中斷），所以開發工具並沒有真正向我展示發生了什麼。另外，我在哥倫布，有問題的用戶在芝加哥。 Chris - 我也會這麼認爲，但這會影響一系列按鈕，而不是按鈕內的內容（每個按鈕都被明確聲明爲內聯塊）。此外 - 只是一個注 - 我沒有寫原始代碼，我只是支持它。 – 2012-08-08 16:36:52

這聽起來像你應該加載備份週一，並做了「差異」上週二，看看發生了什麼變化，因爲它工作之前，它可能不是在它被運行平臺的故障，但而是有人更改了代碼，以便一個瀏覽器能夠解析它，而另一個瀏覽器則不能。人爲錯誤是爲什麼版本控制被髮明。

如果這不起作用，請記住驗證您的XHTML和CSS，以確保錯誤語法不是問題。這些驗證器的目的是確保代碼的有效性如果有效，將會按預期顯示，如果沒有，這是瀏覽器製造商的錯誤，應該作爲錯誤報告。

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

來源

2012-08-08 16:26:40 awiebe

我確信這個CSS上的代碼驗證器會嘔吐得很厲害，我之前做過。我會將其他評論踢給我的開發人員同事，看看他的想法！謝謝！ – 2012-08-08 16:37:50

我們使用顛覆順便說一句，所以是的，版本控制在那裏。但這實際上是兩個用戶，相同的操作系統，相同的瀏覽器，同時查看相同的代碼庫/ URL，並得到兩個不同的結果。 – 2012-08-08 16:39:50

hai i think you initalize the class out of ul tag. so you put the class in inside ul tag. 


<ul class="menu dropdown clearfix"> 
    <li class="{buttonlabel}"> 
     <a href="#"> 
      <span> </span> 
      <strong>{ButtonLabel}</strong> 
     </a> 
    </li> 
</ul>

來源

2012-08-08 16:29:09 ram

所以，首先，我沒有創建代碼 - 我正在嘗試調試它。 {buttonlabel}和{ButtonLabel}實際上是不同的。例如，一個列表項目/按鈕是li的「時間」和實際按鈕文本的「我的時間」。 – 2012-08-08 16:34:28

什麼會導致此按鈕和文本不內聯？

回答

相關問題