自定义list-style的兼容性问题解决办法

最新推荐文章于 2024-07-25 18:00:00 发布

weixin_30364147

最新推荐文章于 2024-07-25 18:00:00 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/frostbelt/archive/2012/03/10/2388781.html

本文介绍了如何使用CSS为HTML列表（ul）设置自定义图标。文章指出直接通过list-style属性设置图标在某些浏览器中可能存在兼容性问题，并提供了一种替代方案——通过在li元素上设置背景图片来实现相同的效果。

用CSS可以定义ul的自定义图标

list-style:url(../images/sig1.jpg);

在IE和FF下都能正常显示，但chrome不兼容。

最好不要用这个属性，改为在li里定义背景图片：

ul:

　　list-style:none;

li:

　　background:url(../images/sig1.jpg) no-repeat;
　　width:120px;

转载于:https://www.cnblogs.com/frostbelt/archive/2012/03/10/2388781.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30364147

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

**CSS** `list-style-type`：自定义列表符号，甚至用表情符号

weixin_41455464的博客

07-04

106

使用无序列表和。

ul自定义list-style的兼容性问题解决

weixin_30572613的博客

12-09

309

用CSS可以定义ul的自定义图标 list-style:url(../images/sig1.jpg); 在IE和FF下都能正常显示，但chrome不兼容。最好不要用这个属性，改为在li里定义背景图片： ul: 　　list-style:none; li: 　　background:url(../images/sig1.jpg) no-repeat; 　　width:120px; ...

参与评论您还未登录，请先登录后发表或查看评论

CSS列表项标记浏览器兼容性解决方案

Serena_tz的博客

02-25

194

同样在所有的浏览器，下面的例子会显示的图像标记：实例： ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } 例子解释： ul: 设

关于CSS的样式问题

weixin_30338481的博客

02-16

用chrome发现多了一个这样的代码ul,menu,dir{useragentstylesheet display:block; list-style-type:disc; -webkit-margin-before:1em; -webkit-margin-after:1em; -webkit-margin-start:0px; -webkit-margin-end:0...

ul li 自定义图标和图标大小

牛晓林的博客

06-22

9242

列表list 有以下属性：链接列表前面的小点点（标记类型）可以通过list-style-type修改： ul { list-style:circle inside; } ul { list-style:square inside; } 也可以自定义图片： ul { list-style:square inside url('./assets/Start.png'); } 但如果图片比较大，就是这样尴尬的效果了：

前端开发_HTML5_CSS部分-列表属性(list-style)

u013185175的博客

12-14

6115

列表属性(list-style) 1.引入我们之前在学习标签的时候学习了列表相关的标签，主要有三个:ul-li(无序列表)、ol-li(有序列表)、dl-dt-dd(定义列表)，那么下面我们来学习一下用于设置列表相关样式的列表属性:list-style。 2.列表相关属性 list-style列表相关属性 1.list-style-type:用于设置在列表显示内容的时候列表项的符号，一般的取值有如下几种: none:无样式 ..

html font-face font-famliy list-style的属性用法

最新发布

05-28

用户可能还会关心兼容性问题，比如不同浏览器对字体格式的支持情况，或者旧版本浏览器的回退方案。需要提醒在@font-face中提供多种格式的字体文件，确保跨浏览器兼容。对于list-style，某些样式可能在旧浏览器中不被...

为什么uniapp中的list-style-type不生效

03-28

比如，uni-app默认使用Vue的模板语法，渲染到不同平台时，可能会有兼容性问题。首先，我需要确认用户是否在正确的元素上应用了样式。在HTML中，list-style-type通常作用于ul或ol元素，而列表项li元素会自动应用...

如何使用list-style-imag属性设置图片为列表项目图像，请举例说明，通俗易懂

03-24

好的，我现在需要回答用户关于如何使用CSS的list-style-image属性将图片设置为列表项目符号的问题，并且要给出简单易懂的例子。首先，我得回忆一下list-style-image的相关知识。根据用户提供的引用内容，特别是引用...

我想要列表的编号是1）这样的，有对应的list-style属性吗

03-20

最后，还需要确保代码示例正确，并提示用户注意浏览器兼容性和可能需要调整的间距问题。同时，根据用户提供的引用，虽然直接引用中没有提到计数器，但这是解决用户需求的合理方法，所以需要结合标准CSS知识进行解答...

CSS list-style修改列表属性控制li标签样式

01-19

list_style属性用于修改列表的属性格式如下： list_style：列表项标记类型列表项标记的位置列表项标记; 也可以单独设置列表项标记： list-style-type用于设置列表项类型：默认值为disc为实心圆，常用值：none空 circle空心圆 square实心方块 decimal数字 lower-latin小写拉丁字母a,b,c….. upper-latin大写字母A,B,C…. list-style-position用于设这列表项位置：默认值outside表示在li标签外部，这是对li添加边框border：1px solid red;

list:style属性详解

lyclyc_的博客

06-27

1万+

关于list-style属性，自己以前就会用一个 list-style:none;用来消除li列表前面的小点点下面详解list-style属性 list-style-type是设置列表前的标记取值有：none,dise,circle,square,decimal 此时不再区分有序列表和无序列表，只要设置列表前面的标记就可以。 list-style简写属性： list-style-type、list-style-image、list-style-position 书写顺序无要求。 ...

css第十课：列表属性及背景属性

YY的博客

09-05

3682

列表属性、背景属性

web前端学习（十七）——CSS3列表属性（list-style）的相关设置

热门推荐

贝尔摩德苦艾酒

01-26

1万+

web前端学习（十七）——CSS3列表属性（list-style）的相关设置

css(list-style属性和三大特性)

wenwenzi__的博客

06-17

3033

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

CSS列表属性：list-style系列属性详解

一起coding，一起嗨。

06-24

1820

CSS列表属性：list-style系列属性详解

list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法，背景图像定义项目符号/学习笔记

我真的睡不够

12-19

1126

2、list-style-image对列表项目图像的控制能力不强一般不建议使用，通常使用<li>设置背景图像的方式实现列表项目图像。在CSS中list-style-position属性可以用来控制列表项目符号的位置，取值有inside和outside两种，默认值为outside。用来分别控制取值位置。由于列表样式对列表项目图像的控制能力不强，所以实际工作中通常通过列表标签设置背景图像的方式来定义列表项目图像。该属性用法同list-style-type一样，该属性能将各列表的项目符号设置成个性化的图像。

CSS list-style 属性

爱人BT的博客

01-11

4621

ul{ list-style:square inside url('/i/arrow.gif'); } 可以按顺序设置如下属性： list-style-type list-style-position list-style-image 一、list-style-type 属性 list-style-type 属性设置列表项标记的类型。 1.1、浏览器支持所有浏览器都支持 li...

CSS 列表属性详解

weixin_59779364的博客

07-25

2042

CSS 列表属性详解

前端开发中兼容性问题及解决方案汇总

可以通过将`list-style-position`设置为`inside`来尝试解决这个问题。 ### LI中内容超过长度后以省略号显示的方法可以通过`text-overflow: ellipsis;`属性来实现当`<li>`中的内容超过其容器宽度时显示省略号的...