• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >浏览器兼容 > css ul li 的使用及浏览器兼容问题

css ul li 的使用及浏览器兼容问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css ul li去掉点,css ul li横向,css ul li,css ul li 横向排列,css ul li样式等相关知识,佚名 希望在学习及工作中可以帮助到您
如果我们给 ul 加上一个背景或者框架,它就会露出原形,也就是在 IE 中项目符号是在 ul 外面,所以 ul 的宽度是不把项目符号算在里面的(如下图1);而 FF 是把项目符号算在 ul 里面的(下图2)。这样对 CSS 解释的差异就导致了在不同浏览器中会产生不同的效果。

在实际应用中,我们会先把样式重置-css reset(如上图3)。把 margin:0;padding:0; 后会发现项目符号不见了。添加 list-style-position:inside; 后项目符号又回来了(如上图4)。

list-style-position:outside: 列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐。

li 浮动后,项目符号在 IE 下不会显示,但在 FF 下显示正常。不过我们经常需要的效果是不让显示项目符号,所以这个 IE BUG 可以基本不管啦。但是一定要设置 list-style-type:none; 要不然你会发现在 FF 中依然会出现项目符号的。

这里介绍一个属性 display:list-item; 将块对象指定为列表项目,并可以添加可选项目标志,也就是 ul/li 的简化版,在 div 和 P 中可以设置为列表显示,并且可以为列表项目添加符号。

通常我们不会用默认的项目符号,因为浏览器的不同,它的位置和大小在各个浏览器中的渲染也是有差异的,而且它不能精确定位,所以一般我们都是通过对 li 设置图片背景 backgroud-image: url() no repeat; 来模拟项目符号的。

下面是项目符号的系统样式:list-style-type </div>

您可能想查找下面的文章:

  • css ul li 的使用及浏览器兼容问题

相关文章

  • 2017-06-02使用X-UA-Compatible来设置IE浏览器兼容模式
  • 2017-06-02ie9崩溃现象当js设置tr元素样式为display:none
  • 2017-06-02IE下使用form时所在行被撑高的解决方法
  • 2017-06-02IE中div被视频遮住(用embed来内嵌视频)的解决方法
  • 2017-06-02FireFox下文本框/域百分比自适应数值padding显示bug解决方案
  • 2017-06-02关于Chrome浏览器字体显示的太小不一的bug处理
  • 2017-06-02IE6、IE7、IE8浏览器下的CSS、JS兼容性对比
  • 2017-06-02浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1
  • 2017-06-02写CSS样式做浏览器兼容时区别ie8和ie9的方法
  • 2017-06-02ie8下input的title闪烁二次显示问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Button未设type属性时在非IE6/7中具有submit特性并自动提交form
    • IE7兼容模式可以解决IE8 FF浏览器下出现文字重叠问题
    • meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染
    • ie6下实现position:fixed效果实例介绍
    • IE7浮层遮挡问题探讨及解决
    • 一个很有用的Firefox和IE插件
    • 使用CSS的@supports标记来检测浏览器的兼容情况
    • FireFox下文本框/域百分比自适应数值padding显示bug解决方案
    • 解决中文版Chrome下网页不能显示小于12px字体
    • IE9 CSS因Mime类型不匹配而被忽略问题相关解答

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有