2個鏈接+按鈕在IE7 / 8/9中無法正確定位，就像在Chrome / Firefox中一樣

Question

我有一個.jsp文件，我們在https://com-bb-dev.com.edu上將其用作登錄頁面，該文件中有幾行顯示一些鏈接/按鈕和實時聊天按鈕。

<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
    <img src="/images/ci/ng/fonts.gif" alt="" /> 
    <a href="#" title="Change Text Size" 
          onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
  </access>
  <access class="access">
    <img src="/images/ci/ng/contrast.gif" alt="" /> 
    <a href="#" title="High Contrast Setting" onclick="page.showAccessibilityOptions(); return false;">High Contrast Setting</a>
  </li>
  </access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);"  onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript"> 
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>

在同一文件中，我聲明了一些單獨的樣式，以便可以修改它們而不會影響相同樣式中的其他任何樣式。 這是我聲明的內容：

parature 
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}

access 
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}

當然，這可以正常工作，並且按鈕和鏈接在Firefox和Chrome中可以正確顯示。 令我震驚的是，它在IE8中不起作用。 您將看到該按鈕被視為直接下線項目，並且可訪問性選項下的兩個鏈接不采用任何CSS格式。 是否因為他們使用的是我在.jsp頁面上本地聲明的樣式？ 我已經不得不回過頭去發現古老的化石不支持透明性，所以發現和修復它很有趣。 到目前為止，這是我嘗試過的：

parature 
{
float:right;
width: 138px;
}

因為我讀到，如果div沒有寬度，則浮點數將不起作用。 不知道要尋找什么。 IE8開發人員窗格是一場噩夢。

謝謝。

Answer 1

li沒有開場白。 那可能是問題所在。 如果沒有，您可以嘗試在parature類上使用內聯塊，只是看該塊是否將在頁面上呈現。

Answer 2

您正在嘗試使用自定義元素，這是您不應該做的，但是IE尤其不會設置任何它不知道的元素的樣式。 這將包括您現在嘗試使用的每個非標准元素。

這可以使用javascript完成。 Google以“ html5shim”為例，說明了如何更新IE以接受HTML5元素。

編輯：此外，由於ul只能包含li元素，因此您在ul內部使用的元素無效。