Question

＆＃13;

.dropdown-menu {
font-size: 12px;
}

＆＃13;

The dropdown I am working on in chrome and Internet Explorer look like this and it needs to look the same on Firefox browser. 以下是我正在处理的代码的代码段。以下代码在Internet Explorer和Google Chrome中运行正常，但在Firefox上无法正常工作：在firefox浏览器中查看时，img将图像带到下拉菜单中的下一行。我需要帮助，因为我已经尝试了很多，我想将文本与Firefox上的li标签中的图像对齐。 Here is the image of the dropdown on Firefox browser looks like.

＆＃13;

<ul class="dropdown-menu" id="accountmenu">
	                 <li><span id="userli" th:text="'Hi, '+${session.COMMUSER.firstName}+' '+${session.COMMUSER.lastName}"></span></li>
	                  <li><a th:href="@{~/aexportal/ProcessUserEdit.do?userId=}+${session.COMMUSER.userId}">My profile</a></li>
	                  <li><a th:href="@{~/aexportal/ProcessCompanyEdit.do?tpId=}+${session.COMMUSER.aexTpId}">Company profile</a></li>        
	                  <li th:if="${!session.COMMUSER.containsRole('OPERATOR')}"> <a th:href="@{~/aexportal/ProcessTradingPartnerDirectorySearch.do}">Trading Partner Directory</a></li>                 
	                  	<li th:if="${session.COMMUSER.containsRole('BUYER_ADMIN') or session.COMMUSER.containsRole('SELLER_ADMIN')}"><a th:href="@{~/aexportal/ProcessCompanyAdminConsole.do}">Administration</a></li>
	
	                  <li><a th:href="@{http://esupport.aeroxchange.com/secure/Dashboard.jspa}">View and report incidents</a></li>
	                  <li><a th:href="@{~/aexportal/ProcessBeforeRegistration.do}">Create another registration</a></li>
	                  <li><a th:href="@{~aexportal/training/training_centre.jsp}">User Guides</a></li>
	                  <li><span id="productsli" th:text="Products"></span></li>
	                  <li><a th:href="@{~/lbts/DisplayAOGPartSearch.do}">AeroAOG <img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                  <li><a th:href="@{~/polc/DisplayPOBuyerConsole.do}">AeroBuy <img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/commercial-web/show_console}">AeroBuy Commercial<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>                  			                  			                  			                  			                  			                  			                  			                  			
	                  <li><a th:href="@{~/aexportal/DisplayNewACRedirection.do}">New AeroComponent<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/ac/DisplayProviderConsole.do}">AeroComponent<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/consignment/DisplayConsignmentPartSearch.do?appUser=buyer&amp;newSearch=true}">AeroConsignment<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/repair/DisplayRepairConsole.do?console=buyer}">AeroRepair<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/aexportal/mktint/mktintPurchaseHome.jsp}">AeroDex<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	                 <li><a th:href="@{~/rfi/DisplayRFIConsole.do}">RFx<img src="img/aex_bullet_sm.gif" width="15" height="19" border="0" align="right"/></a></li>
	              <li style="text-align: right; margin-right: 5px; margin-top: 1px;"> <button id="logout" class="btn btn-xs btn-primary"> Logout </button></li>                			
	  			</ul>

＆＃13;

Answer 1

通过完全放弃img标记并通过CSS background属性设置图标图像，可以更轻松地完成所需的结果：

<ul>
    <li>No Icon Example</li>
    <li>No Icon Example</li>
    <li>No Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
    <li class="icon">Icon Example</li>
</ul>

ul li {
    height: 30px;
}

ul li.icon {
    background: url("../images/arrow.png") 130px 0 no-repeat;
}

带有图像的下拉菜单在Firefox浏览器上没有对齐

1 个答案: