inline-block

IE6/7支持inline-block的元素只有内联元素（如：a, span, strong, sup, sub等）但是不支持块级元素，比如div。 用一下可以实现IE6、7下呈现inline-block的样式。 display:inline-block;*display:inline;zoom:1; IE7以上和其他浏览器支持display:inline-block; IE6、7用*display:inline;zoom:1;实现。顺序不能错。 Ie6不支持max-height,可用以下实现个浏览器兼容： _height:40px;max-height:40px; 来源： CSDN 作者： soarheaven 链接： https://blog.csdn.net/soarheaven/article/details/6995348

对于display:inline-block，做项目的时候经常用到，经常出问题，所以在今天，终于下定决心要好好整理下。 众所周知：inline-block的 作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 这就给我们带来很大的便利，比如不用浮动，就可以将元素呈递为内联样式，而且还可以直接给元素设置宽度、高度、边距等等。俗话说，有利就有弊，没有东西是完美的。inline-block在给我们带来好处的同时，也带给了我们很多麻烦。就比如前端要考虑的兼容问题。 一、兼容性 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 就如下面的代码： html: <ul class="test"> <li>放假</li> <li>放假</li> <li>放假</li> <li>放假</li> <li>放假</li> <li>放假</li> </ul> css: .test {width:200px;height:200px;background: #add8e6;padding:80px 40px 20px;} .test

在ie8以及以上的浏览器中，对块级元素使用了display:inline-block后，会将块级元素转换为行内块元素，但是在ie7和以下的浏览器不支持 在ie7和以下的浏览器中 使用了display：inline-block会触发ie的layout 解决方法： div{display:inline-block; *zoom:1; *display:inline} 来源： CSDN 作者： kateli1991 链接： https://blog.csdn.net/huahuili/article/details/46237545

今天遇到一个 display:inline-block 不被IE7识别的问题，如图： 除IE7之外的其他浏览器： IE7： 解决方案： 第一种：专门为IE7写Hack display:inline-block; *display:inline; *zoom:1; 特别是 ZOOM:1 这个必须的 第二种： .selector { display: inline-block } .selector { *display: inline } 注意这两个 display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将 display设回inline或block，layout不会消失。不能写进一个声明中。 另外：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意... 来源： CSDN 作者： linlin_juejue 链接： https://blog.csdn.net/linlin_juejue/article/details/6622756

//多行文本超出省略 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;//超过行数 目前只在测试过chrome -webkit-box-orient: vertical; 详情可以看 //火狐浏览器 select 和scroll 有兼容问题 （如果是自定义样式的话 ） @-moz-document url-prefix() { .classname{ attr:val; } } //这里是转载的 inline-block IE6/IE7下：inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的； 对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性） IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline

标题严格遵守了新广告法，你再不爽，我也没犯法呀！话不多说，直入正题。 所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。 大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解，做个总结巩固一下。如果你也看了很多资料，但是实际动手时对布局还是无从下手的话，希望本文可以帮你理清思路。 唠叨一句：看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现，当你思路清晰找到最好的布局方案时，coding其实真的不需要多少时间。 尺寸相关 为什么要先说尺寸呢？因为尺寸在布局中的作用非常核心，布局方式定位这些只是改变了元素之间的关系，没有尺寸就什么也不是。比如我们通常会用margin来控制跟其他元素的距离，这就是布局。 很多人都会觉得，什么width、margin太简单了，早就掌握了。这种心态我一开始学习CSS的时候也有，觉得很好理解很简单，但是后面才发现自己原来很多东西都没真正掌握。看看张鑫旭大神给我们上的政治课： http://www.zhangxinxu.com

右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vertical-align:middle; } .div1{ height:500px; width:500px; background:pink; } .div2{ width:200px; height:20px; background: #c7254e; margin-left:50px; } </style> <div> <div class="div1"></div> <div class="div2"></div> </div> 更多专业前端知识，请上 【猿2048】www.mk2048.com 来源： https://blog.csdn.net/qq_45670012/article/details/102777587

在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？ 共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示不换行，直到本行排满为止。block的元素始终会独占一行，呈块状显示，可设置宽高。所以inline-block的元素就是宽高可设置，相邻的元素会在一行显示，直到本行排满，也就是让元素的容器属性为block，内容为inline。 ②float： 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。当我们设置了元素的浮动时，这个元素就脱离了文档流，相邻元素会呈环绕装排列。 两者共同点是都可以实现元素在一行显示，并且可以自由设置元素大小。 区别： ①inline-block: 水平排列一行，即使元素高度不一，也会以高度最大的元素高度为行高，即使高度小的元素周围留空，也不回有第二行元素上浮补位。可以设置默认的垂直对齐基线。 ②float: 让元素脱离当前文档流，呈环绕装排列，如遇上行有空白，而当前元素大小可以挤进去

.container { position: relative; .my-center { text-align: center; line-height: 30rpx; min-width: 400rpx; } .my-right{ position: absolute; right: 20rpx; top: 0rpx; display: inline-block; line-height: 30rpx; } } 　　 参考： https://segmentfault.com/q/1010000005348924 来源： https://www.cnblogs.com/zinan/p/11644198.html

1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。 　　元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px 当我学到了节点（node）时，就发现了这个问题产生的正真原因。 当我们换行时，会产生一个文本节点，这个文本节点的内容是换行 这些是常见的节点以及节点类型值 元素节点 　　Node.ELEMENT_NODE(1) 属性节点 　　Node.ATTRIBUTE_NODE(2) 文本节点 　　Node.TEXT_NODE(3) 2.解决办法 第一种，不换行 既然是换行产生的，那么我们不换行就是了。所以第一种办法就是把所有的代码都写到一行，便不会产生空隙了。 <span>xxxx</span><b>xxxxx</b> 缺点：如果代码太多，写到一行会影响程序可读性，不好看嘛。所以第一办法也不是很可行。 第二种，改变字体大小(推荐）