javascript - 显示和列表样式属性在 IE8 中不起作用 - 这是兼容性问题吗?

标签 javascript jquery css internet-explorer-8

我正在尝试在 IE8 中显示某些内容 - 即每个表格行中模仿列表的点。它是在 asp.net 中完成的,并且有一些服务器控件,所以我可以做的更改非常有限。我对样式表进行了一些更改,这些更改在当前的浏览器中起到了作用,但在 IE 8 中不显示圆点/元素符号。我创建了一个示例页面来演示该问题。代码如下,还有一个 jsFiddle 链接。

关于如何找到与 IE 兼容的方式在每一行显示元素符号的任何想法?我想我可以在那里贴一张图片,但谁知道我可能会遇到什么其他的 hijinx。提前感谢您的任何建议。

http://jsfiddle.net/NbL6W/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<!-- Add jquery for client side functionality... -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<style>

.TableListItems
{
padding: 10px 5px 0px 15px;
text-decoration:none;
font-weight:normal;
border: none 0 white;
}

td.TableListItems
{
display:list-item;
list-style:disc inside;
}
</style>

</head>
<body>
   <table cellspacing="0" rules="all" border="1" style="width:100%;border-collapse:collapse;">
<tr>
<th scope="col" style="width:100%;">The title</th>
</tr><tr class="TableListItems">
<td class="TableListItems">A line of text a line of text</td>
</tr><tr class="TableListItems">
<td class="TableListItems">more lines of text more lines of text</td>
</tr><tr class="TableListItems">
<td class="TableListItems">still more lines of text</td>
</tr>
</table>
</body>

<script language="javascript" type="text/javascript">

   $(document).ready(function () {
           $("td.TableListItems").css( { "display":"list-item", "list-style":"inside" } );
   });

   </script>

</html>

最佳答案

您不需要使用 jQuery,只需使用当前的 td.TableListItems CSS 类即可:

td.TableListItems:before
{
    display:inline-block;
    content:"";
    width:5px;
    height:5px;    
    margin-right:5px;
    vertical-align:middle;
    background-color:black;
    border-radius:50%;
}

最后一行在 IE8 中不起作用,因此元素符号在该浏览器中是方形的(它们在其他任何地方都是圆形的)但它们会显示。

关于javascript - 显示和列表样式属性在 IE8 中不起作用 - 这是兼容性问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24025890/

相关文章:

javascript - 使用Protractor,如何选择具有唯一类的div并测试它是否显示?

html - 根据页面大小定位图像

css - 对于任何元素,在 CSS 重置(以及 eric meyer 重置)中包含哪些其他内容会很好

jquery - 动态添加行时如何让表格向上增长?

javascript - 计算网站上多个文件的下载次数的最佳方法

jquery - 拖动元素时中断 swipeleft/-right

javascript - 如何使用 JavaScript 搜索 HTML 表格中的单元格?

javascript - 使用当前状态序列化和反序列化表单

javascript - JQuery DatePicker 多输入

javascript - 如何使用 Javascript 移除 Rails 按钮上的焦点?