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 点 ...
随机推荐
- SQL Server 如何更改SQL Server和windows身份方式验证
1.安装sql后先用windows账户登陆进去,然后在sql上右键,选择“安全性”-“SQL Server和windows身份验证模式”然后确定 2.找到安全性——登陆名(sa用户)右键——状态,在登 ...
- 输入一个正整数n (1<n<=10),生成 1个 n*n 方阵 求出对角线之和
#define _CRT_SECURE_NO_WARNINGS #include <Windows.h> #include <stdio.h> #include <std ...
- ThreadFactory
在Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) 比如,任何一个守护线程都是整个JVM中所有非守护线程的保姆:只要当前JVM实例中尚存在任何一个非守护 ...
- SolrCloud的搭建的连接
1 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用SolrCloud.当一个系统的索引数据量少的时候是不需 ...
- rman对应format参数说明
format 的替换变量,注意大小写! 1. %d --数据库的db_name 2. %n --数据库的8位长度的db_name,不足部分用“x”后面填充 3. %N -- ...
- 使用cookie的注意事项
一.什么是cookie? Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼[1],指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) ...
- MVC切片编程
在商城网站中,用户中心的每个页面都要几乎都要涉及对用户是否登录的判断,为了减少代码重写,可采用切片编程 using System; using System.Collections.Generic; ...
- List转为DataTable并可以导出为Excel
using com.jd120.Core.Utility; using System; using System.Collections.Generic; using System.Data; usi ...
- 树莓派直连线连接PC
刚入手树莓派一天不到,SSH树莓派一直用的是路由+无线网卡的配置.想到明天就要出差了,本想把树莓派也带去,可宾馆的房间只有一个网口,通常都是兄弟们连接小型无线路由用的,连接树莓派似乎成了一个难题.于是 ...
- AFNetworking 3.0修改指南
AFNetworking是一款在OS X和iOS下都令人喜爱的网络库.为了迎合iOS新版本的升级, AFNetworking在3.0版本中删除了基于NSURLConnectionAPI的所有支持.如果 ...