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

您正在尝试使用您不应该这样做的自定义元素，但 IE 尤其不会设置它不知道的任何元素的样式。这将包括您现在尝试使用的所有非标准元素。

这可以使用 javascript 来完成。谷歌搜索“html5shim”，了解如何更新 IE 以接受 HTML5 元素。

编辑：此外，您在 ul 中使用的元素是无效的，因为 ul 只能包含 li 元素。

Answer 2

li 没有开始标签。这可能是问题所在。如果没有，您可以尝试在 parature 类上使用 inline-block 来查看该块是否会在页面上呈现。