什么意思_html5文字居中代码

什么意思_html5文字居中代码【转载】display:inline-block兼容ie6/7的写法

大家好,又见面了,我是你们的朋友全栈君。

原文来自:http://www.phpvar.com/archives/2211.html

1、 实例演示效果

  • <div id="container">什么意思_html5文字居中代码
    li不加浮动
    display:inline-block
  • <div id="container">什么意思_html5文字居中代码
    li不加浮动
    display:inline-block
  • <div id="container">什么意思_html5文字居中代码
    li不加浮动
    display:inline-block

2、 display:inline-block作用?

使用display:inline-block属性,可以使行内元素()或块元素能够不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父元素居中显示!

3、 什么时候会用到display:inline-block?

在网站布局中,很多时候,子元素中使用行内元素如span或块元素li标签且标签个数不定,而我们又想让这一块不管个数有多少个(子元素的总体宽度不定),始终都能居中显示!这个时候display:inline-block就能派上用场了!

4、 ie6/7支持display:inline-block这个属性吗?

在内联元素上定义display:inline-block属性,发现IE6、IE7中的显示效果同其它浏览器一致,但事实是ie7及更低版本的ie浏览器不支持display:inline-block这个属性!
正确的解释是”使用inline-block属性在IE下会触发layout,因此元素上设置的width、height是能生效的,所以也就有了同其它浏览器一致的显示效果”,而不能说IE6/7支持 display:inline-block!

5、 行内元素只需定义display:inline-block,显示效果各浏览器都是一致,IE7下块元素如何实现 display:inline-block 的效果??

在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置 display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline- block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout!

6、 IE7下块元素如何兼容 display:inline-block写法?

实际有效的方法共有2种:

方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。兼容各浏览器的代码如下: div {display:inline-block;*display:inline; *zoom:1;…}
方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容): div {display:inline-block;…}div {*display:inline;}

7、 display:inline-block元素间会产生多余空白怎么解决?

display:inline-block元素间会产生多余空白,这是inline-block本身特性!
严格来讲不算BUG,使用font-size设置可以解决,解决display:inline-block元素间多余空白的相关文章:http://www.phpvar.com/archives/453.html

转载于:https://www.cnblogs.com/positive/p/3655763.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106758.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java中%c%n是什么意思_在编码时如何使用\r与\n,两者的区别

    java中%c%n是什么意思_在编码时如何使用\r与\n,两者的区别\r与\n到底有何区别,编码的时候又应该如何使用,我们下面来了解一下。区别:\r:全称:carriagereturn(carriage是“字车”的意思,打印机上的一个部件)简称:return缩写:rASCII码:13作用:把光标移动到当前行的最左边\n:全称:newline别名:linefeed缩写:nASCII码:10作用:把光标向下移动一行不同操作系统怎样表示“回车+换行”(即一行的结…

  • 最新Hadoop的面试题总结[通俗易懂]

    最新Hadoop的面试题总结[通俗易懂]1、集群的最主要瓶颈 磁盘IO2、Hadoop运行模式 单机版、伪分布式模式、完全分布式模式3、Hadoop生态圈的组件并做简要描述 1)Zookeeper:是一个开源的分布式应用程序协调服务,基于zookeeper可以实现同步服务,配置维护,命名服务。 2)Flume:一个高可用的,高可靠的,分布式的海量日志采集、聚合和传输的系统。 3)Hbase:是一个分布式的、面向列的开源数据库,利用HadoopHDFS作为其存储系统。 4)Hive:基于Hadoop的一个数据仓库工具

  • potplayer快捷键大全「建议收藏」

    potplayer快捷键大全「建议收藏」Shift+↑    声音->播放音量控制->主音量+Alt+↑     字幕->字幕风格->上移Ctrl+Alt+↑     声音->系统音量->波形音量+Ctrl+Alt+Shift+↑…

  • Python语言实现C-S架构–基于TCP通信[通俗易懂]

    Python语言实现C-S架构–基于TCP通信[通俗易懂]加粗样式@[TOC](http://blog.chinaunix.net/uid-26833883-id-3500874.html欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语…

  • 【Consul】Consul实践指导-Watch机制

    【Consul】Consul实践指导-Watch机制Watches是查看指定数据信息的一种方法,比如查看nodes列表、键值对、健康检查。当监控到更新时,可以调用外部处理程序——可以自定义。比如,发现健康状态发生变化可以通知外部系统健康异常。…

    2022年10月31日
  • 我为什么放弃Go语言[通俗易懂]

    我为什么放弃Go语言[通俗易懂]我为什么放弃Go语言?有好几次,当我想起来的时候,总是会问自己:这个决定是正确的吗?是明智和理性的吗?其实我一直在认真思考这个问题。开门见山地说,我当初放弃Go语言,就是因为两个“不爽”:第一,对Go语言本身不爽;第二,对Go语言社区里的某些人不爽。毫无疑问,这是非常主观的结论,但是我有足够详实的客观的论据。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号