为什么它可以设定高度,但又不像 <h1 /> 这些元素,那种感觉就像它是个“半内联"的(内联:inline[text]-level)元素。HTML 4是这样描述的:

The following elements may also be considered block-level elements since they may contain block-level elements:

  • DD – Definition description
  • DT – Definition term
  • FRAMESET – Frameset
  • LI – List item
  • TBODY – Table body
  • TD – Table data cell
  • TFOOT – Table foot
  • TH – Table header cell
  • THEAD – Table head
  • TR – Table row

这段描述中,似乎也是在说, <li /> 就是一个"半内联"的元素。当然,这个列表里面的类似于 <td /> 这些元素,也曾给我带来这样的疑惑。今天看了一下各浏览器的默认CSS。结果是这样的:

Browsers CSS IE6/IE7 li{display:block;} IE8+ / Webkit / Firefox / Opera li{display:list-item;}

在这里,也基本上明了了。在除 IE6/7 以外的 A-Grade 浏览器中,就是一个"半内联"的元素。提到 display:list-item; ,其实,即使现在所有的 A-Grade 浏览器都支持,用的人其实不多。为什么?其实就是没什么用。在 Quirks Mode,PPK 是这样说的:

display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI’s in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI’s).

Live example:

display: block

display: list-item display: list-item

Right。其实这个意义不大。但也算是解了自己的一个疑惑。分享出来,如果你也有这样的疑惑,或许下次 Coding 的时候出现 Bug 或者其他疑问,估计也就能很快反应过来了。

标签:
li,块级元素

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com

评论“标签 li 是不是块级元素分析”

暂无“标签 li 是不是块级元素分析”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。