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 点 ...
随机推荐
- vector 中需要注意的东西!
vector的erase方法注意点!!! C++11是这样的: iterator erase (const_iterator position); iterator erase (const_iter ...
- cesm1_2_2在南信大大型机上的移植以及运行简单case的步骤
真实验证有效:点击链接 查看具体移植过程.
- CentOS 7 Linux 卸载/安装 Mariadb MySQL mysql 5.7
[root@localhost mysql]# ls mysql-community-client--.el7.x86_64.rpm mysql-community-embedded-compat-- ...
- vue-cli构建项目在index.html中使用静态文件
在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直 ...
- 牛客网Java刷题知识点之什么是单例模式?解决了什么问题?饿汉式单例(开发时常用)、懒汉式单例(面试时常用)、单例设计模式的内存图解
不多说,直接上干货! 什么是单例设计模式? 解决的问题:可以保证一个类在内存中的对象唯一性,必须对于多个程序使用同一个配置信息对象时,就需要保证该对象的唯一性. 如何保证? 1.不允许其他程序用new ...
- CentOS 7 更新软件源和系统
[1] 首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cent ...
- springmvc+spring+mybatis+sqlserver----插入一条新数据
<insert id="addOneMsg" parameterType="java.util.Map"> INSERT INTO PDA_JWL_ ...
- P1576 最小花费
题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...
- SAP R/3 IDES 4.71 编译前后硬盘空间大小比较
使用SGEN编译前 使用SGEN编译后
- Mahara-16.10 (Ubuntu 16.04)
平台: Ubuntu 类型: 虚拟机镜像 软件包: mahara-16.10 commercial education elearning mahara open source 服务优惠价: 按服务商 ...