IE问题——列表项图像
等我们实现列表时,经常会遇到一种情况:需要为列表的每一项的前面添加一个列表项图像。
我们在查阅W3C时会发现,在CSS中已经为我们提供了实现方法——“list-style-type”,我们来看看它的实现方法。
方法一(“list-style-type”属性):
- ul {
- list-style-type : square;
- list-style-position: inside;
- }
这样做的确能实现添加小方块,其中 的“inside”是为了保证小方块在列表项的内部,对于方块的大小和间距仍然需要额外控制,(注意在设置type后就不要把li的display设置成其他值了),更重要的原因是,css为我们提供的样式有限,不能满足我们丰富的要求。(如果想使用list-style-image添加自己的图片,我们仍然需要去单独控制image的位置,这样做要比单独的一个span或div要麻烦一些。)list-style-type带来的问题不止这些。它是一种不稳定的式样,在IE中对它的解析与chorm会有不同。一般地在chorm中会是一个漂亮小巧的小方点,而在IE中它是一个大方块。这是因为我们并未对它的大小有控制。因此我提倡以下两种方法。
方法二(行内的span):
- .listImgDemoBox_1 ul {
- list-style: none;
- }
- .listImgDemoBox_1 ul li {
- height: 20px;
- font-size: 16px;
- line-height: 20px;
- }
- .listImgDemoBox_1 ul li span {
- display: inline-block;
- width: 3px;
- height: 3px;
- background-color: #000000;
- vertical-align: middle;
- }
即,每一个列表项内都放入行内元素。最前面放入一个span来填充颜色或图像。
方法三(浮动的span):
- .listImgDemoBox_1 ul {
- list-style: none;
- }
- .listImgDemoBox_1 ul li {
- height: 20px;
- font-size: 16px;
- line-height: 20px;
- padding-left: 10px;
- }
- .listImgDemoBox_1 ul li span {
- display: block;
- float: left;
- width: 3px;
- height: 3px;
- margin-top: 9px;
- margin-right: 5px;
- background-color: #000000;
- vertical-align: middle;
- }
即li的padding-left留出空位,再将列表项的图片浮动过去。
方法二和方法三在IE和Chorm中的效果是一样的,并且位置也比较好控制。
IE问题——列表项图像的更多相关文章
- CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- CSS中列表项list样式
CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...
- (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector
本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...
- 好神奇的代码,可以让匿名用户对特定SharePoint 列表拥用添加列表项的权限哦
如果你不使用代码,很难从界面上去设置列表的匿名用户(如果可以请告诉我,我会自动删除这个博文)拥有列表项的添加权限. 其实这种需求是非常必要的,比如: 1.允许新用户去提交一个注册申请, 2.在召集临时 ...
- 复制SharePoint列表项(SPListItem)到另一个列表
从理论上讲,有一个简单到难以置信的解决办法:SPListItem提供了一个CopyTo(destinationUrl)方法(可参考MSDN).不幸的是,这个方法似乎用不了.至少对我的情况(一个带附件的 ...
- 【WPF】制作自定义的列表项面板
我们在使用像ListBox的列表控件时,我们都知道可以通过其ItemsPanel的依赖项属性来自定义一个面板来放置列表控件中的列表项.除了CLR库提供的几个面板外,我们完全可以把自己写的面板作为项列表 ...
- 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...
- 关于ol有序裂变和ul无序列表前面的列表项标记的位置
使用列表项标记的时候发现其对齐方式竟然从内容开始,于是发现了这个属性可以解决: list-style-position inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐. outsid ...
- Android 可拖动列表项的ListView
需求分析 一个界面内两个ListView 我关注的栏目列表 上面的要长按后可拖动排序 点击减号后列表项消失 下面列表增加一行 同时存储相应字符串到本地作为标记 未关注栏目列表 普通ListView 点 ...
随机推荐
- VUE验证器哪家强? VeeValidate absolutely!
VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...
- 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位
昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...
- 搭建并行开发环境MPICH2
平台信息 Description: CentOS Linux release 7.6.1810 (Core) 注意事项 安装BLAS之前需要: 安装 GCC/GFortran 环境 安装步骤 下载 m ...
- PopUpWindow使用方法
个人使用建议,容易犯错:先设置属性再显示,而不是先出来了,再设置都没用了,显示一般是用showatlocation,或者showasdropdown 个人建议2:popupWindow的显示的两个方法 ...
- mac os安装macvim
1 brew install macvim 安装 macvim 2 alias vim='/usr/local/Cellar/macvim/7.4-73_1/MacVim.app/Contents/M ...
- Ajax原理实现
jQuery的ajax实现原理: // 1.创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.打开请求 xhr.open('METHO ...
- HDU 5371——Hotaru's problem——————【manacher处理回文】
Hotaru's problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- intellijidea课程 intellijidea神器使用技巧1-3 idea下载
下载: 下载地址:https://www.jetbrains.com/idea/download/ download==>windows==>ultimate版本(付费版本免费试用30天) ...
- (三)JavaScript之[事件]与[字符串]
5].事件**JavaScript事件:HTML事件 * HTML事件是发生在HTML元素上的事情 * HTML事件可以是[浏览器的行为],也可以是[用户的行为] * * 实例: * HTML页面完成 ...
- (八)JavaScript之[JSON]与[void]
14].JSONJSON 格式在语法上与创建 JavaScript 对象代码是相同的. 方法:JSON.parse(); //将JSON字符串转换为JavaScript对象JSON.stringify ...