ie7 显示不了 ol 数字的解决方法

最新推荐文章于 2021-06-03 01:44:49 发布
最新推荐文章于 2021-06-03 01:44:49 发布
阅读量212 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_520/article/details/82001293
本文解决了IE7中ol元素数字显示异常的问题，通过添加clear:left属性和特定的负上边距来解决浏览器间的差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天莫名其妙的遇到 ie7 显示不了 ol 的数字，加上 clear:left 解决。

ol.newClaim { margin::-18px 0 0 4em; clear:left }

其中 -18px 的上边距是用于解决 ie7 出现的上边距和 ff 不一样的 hack，可根据实际情况决定是否添加此负值。
前端宽度一至显示宽度不一致_前端硬核面试专题之 CSS 55 问
weixin_36046580的博客
12-30 1919
前言本文讲解前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，欢迎关注。CSS盒子模型的理解 ?标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止...
html ol liststyle,CSS: list-style 和 inline使用方法详解
weixin_33358099的博客
07-22 833
CSS: list-style 和 inline使用方法详解发布时间：2013-11-26 17:02:57 作者：佚名 我要评论以前只用到 list-style:none; 这种方式，原以为也只这种方式呢，这个方式只不过是让 li 前的标记去掉而已，下面为大家介绍下CSS: list-style 和 inline 用法详解，感兴趣的朋友不要错过平时只顾着写程序，写 div 或 span...
JQuery easyui ie9 火狐 谷歌不显示数据ie6 ie7 ie8 显示数据问题解决方案
897371388
08-27 166
JQuery easyui ie9 火狐 谷歌不显示数据ie6 ie7 ie8 显示数据问题解决方案 问题描述: 昨天在用jquery easyui 开发时,发现一个问题,好像突然间出现的,刚刚还好好的,现在就显示不出数据了,ie9 谷歌 火狐下都不能显示,但在ie6 ie7 ie8 下都能显示数据gridlist 解决思路: 1:首先想到的是代码问题,因为jquery easyui...
IE6 IE7下ol li无法显示list-style-type解决办法
zimin的专栏
01-25 1283
------解决方案-------------------- li { list-style:decimal inside; } /* 或 */ li { list-style:decimal; margin-left:25px; }
OL有序列表 IE 与 非IE 浏览器兼容问题解决
weixin_30542079的博客
05-28 90
关键是 引用 让数字在内部显示list-style:decimal inside;如果不加，IE不会递增display: list-item; <style> .iknow_list{ width:241px; height:160px; padding:0px; margin-top:5px; background:url(img/fk.jpg) no-r...
html ol 序号不出来,html中ol标签不显示序号的解决办法
weixin_34345599的博客
06-03 4579
html ol 和 ul 区别之一就是 ol 标签下面的 li 标签会自动带上序号，而是 ul 下面的 li 标签不会。如果 ol li 标签没有序号，原因很简单， 就是你重置了 ol 标签的左内边距，即 padding-left。要使用 ol li 标签正常显示序号，必须保证 ol 标签有 20px 左右的左内边距，即 padding-left: 20px;浏览器默认是会显示ol li 标签的序...
关于css中为什么ol标签不显示序号的解决办法
热门推荐
firstjie
08-15 1万+
html ol 和 ul 区别之一就是 ol 标签下面的 li 标签会自动带上序号，而是 ul 下面的 li 标签不会。 如果 ol li 标签没有序号，原因很简单， 就是你重置了 ol 标签的左内边距，即 padding-left 要使用 ol li 标签正常显示序号，必须保证 ol 标签有 20px 左右的左内边距，即 padding-left: 20px; 浏览器默认是会显示ol li
IE Bugs 列表和解决方法
weixin_33831673的博客
06-29 220
老外的 http://haslayout.net/css/网站上,系统的总结了IE的一些Bugs，分享一下 这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”，所有的这些Bug有58个指南和70个解决方法。 IE的CSS Bug：普通Bug 这部分IE的 bug 是比较普通的无法归到其它种类，或是同时属...
ie6,ie7,ie8 css bug兼容解决方法
weixin_30463341的博客
11-07 127
IE浏览器以不支持大量的css属性出名，同时也因其支持的css属性中存在大量bug。 这里收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！ 普通IE css bug bug名称 影响版本 描述 Imag...
关于IE6下Li标签左边多出宽16pxBUG的问题
12-13
但IE6却并不这样处理，即使没有显示项目符号，它仍会保留16px的空间，这16px正是默认项目符号的大小。因此，即使设置了`margin:0`或`padding:0`，在IE6中`<li>`元素的左边仍然会有16px的空白。 解决这个问题的方法...
CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)
09-24
值得注意的是，这些CSS特性在较旧的Internet Explorer版本（如IE6和IE7）中可能不受支持，但IE8及更高版本通常能很好地处理这些特性。因此，如果你需要支持这些老版本的浏览器，可能需要采用其他方法，如JavaScript...
CSRR-SIW 带通滤波器
最新发布
08-07
基于CSRR加载的SIW带通滤波器 基于互补开口谐振腔的基片集成波导带通滤波器
cpp,统计山峰的代码
08-07
cpp,统计山峰的代码
申报户口事项申请表上海.doc
08-07
申报户口事项申请表上海.doc
浙江省义乌市服务型企业招聘现状调查报告.doc
08-07
浙江省义乌市服务型企业招聘现状调查报告.doc
财务管理的目标的和原则公司金融东北财经大学.doc
08-07
财务管理的目标的和原则公司金融东北财经大学.doc
战略合作协议书优秀范本.doc
08-07
战略合作协议书优秀范本.doc
Html 有序数字方框
04-24
<think>好的，我现在需要帮助用户解决关于HTML有序列表数字方框样式设置的问题。首先，用户提到的“有序数字方框”可能指的是将默认的数字序号替换为带有方框的样式。我需要回忆一下HTML列表的相关知识，特别是如何自定义有序列表的序号样式。 首先，HTML中的有序列表使用`<ol>`标签，每个列表项用`<li>`。默认情况下，浏览器会显示数字序号，比如1、2、3等。但用户想要的是将这些数字放在方框里。这通常需要CSS来实现。 接下来，我需要考虑如何通过CSS修改列表项的标记。可能的方法包括使用`list-style-type`属性，但标准的属性值如`decimal`、`lower-roman`等可能无法满足方框的需求。这时候可能需要自定义计数器，并结合伪元素来生成内容。 另外，用户可能希望每个数字被包裹在一个方框内，比如圆角矩形或正方形，带有背景颜色和边框。这需要为每个列表项前面的标记设置样式，可能涉及到隐藏默认的列表标记，然后使用`::before`伪元素来添加自定义的内容，并结合CSS样式如`border`、`padding`、`border-radius`等。 还需要考虑不同浏览器的兼容性，确保所提供的方法在主流的浏览器上都能正确显示。此外，可能需要调整列表项的缩进，以避免自定义样式导致的布局问题，比如使用`padding-left`或`margin-left`来调整位置。 然后，我应该整理出具体的步骤和代码示例。例如，首先隐藏默认的列表标记，然后为每个`<li>`元素添加伪元素，设置内容为计数器的值，并应用方框样式。同时，需要使用`counter-increment`来管理计数器的递增。 可能还需要提到其他变体样式，比如不同的颜色、大小或形状，让用户可以根据需要进行调整。此外，提醒用户注意浏览器支持情况，特别是如果使用了一些较新的CSS属性，可能需要添加前缀或备用方案。 最后，生成相关问题，帮助用户进一步探索，比如如何改变方框颜色、如何创建自定义符号列表，或者如何处理多级列表的样式。这些问题应该与用户当前的问题相关，并引导他们深入学习。</think>### HTML有序列表数字方框样式设置方法 通过CSS自定义计数器可实现带方框的有序列表样式，具体步骤如下： 1. **隐藏默认列表标记** ```css ol.custom-box { list-style: none; padding-left: 2em; /* 控制整体缩进 */ } ``` 2. **创建自定义计数器** ```css ol.custom-box li { counter-increment: box-counter; position: relative; margin: 5px 0; } ``` 3. **添加方框样式** ```css ol.custom-box li::before { content: counter(box-counter); display: inline-block; width: 25px; height: 25px; border: 2px solid #2196F3; border-radius: 4px; background-color: #E3F2FD; text-align: center; line-height: 25px; position: absolute; left: -2em; } ``` #### 效果示例： $$示例代码渲染效果：$$ 1. 项目一 2. 项目二 3. 项目三 #### 样式变体： - **彩色方框**：修改`background-color`和`border-color` - **圆形样式**：设置`border-radius: 50%` - **尺寸调整**：修改`width`/`height`和`line-height` #### 浏览器兼容性： 支持所有现代浏览器（Chrome/Firefox/Edge），需注意IE浏览器需要polyfill支持[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值