兼容性-inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline-block;
            background: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

其他浏览器正常显示一行,IE6/7显示效果如下(不认display:inline-block)

可以通过下面方法解决

*display: inline;
*zoom: 1;

div{
            width: 100px;
            height: 100px;
            display: inline-block;
            background: red;
            *display: inline;
            *zoom: 1;
}

问题2:当设置高度为1px的时候,IE6显示高度为19px,可以通过overflow:hidden解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            height: 1px;
            background: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>
时间: 2024-09-29 12:42:51

兼容性-inline-block的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

关于 inline block 元素之间的空格

本篇文章由:http://xinpure.com/about-the-inline-block-element-between-spaces/ 说点什么 display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg

css中display常用属性详解之Block(一)

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处

CSS学习一

想起来自己一直以来也没有系统的学习过HTML+CSS.适逢工作需要,决定这段时间系统的过一遍html与css,在这将自己的学习情况整理成博客. 在此强烈推荐王福朋的博客,本人也是通过该博客学习. 上图展示了 在浏览器中 html 与css是如何工作的. 浏览器将载入的html变为dom树,但是此时没有任何显示样式.所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式. (1)理解css 层叠样式表 css 意为层叠样式表.样式表比较好理解,但是层叠是指什么呢? 层叠指 浏览器对多

day14---html基础

本节内容: 一.HTML 二.CSS 三.JS HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(Web框架) 3.本地测试 - 找到文件路径,直接浏览器打开 - pycharm打开测试 4.编写Html文件 - doctype对应关系 - html标签,标签内部可以写属性 ====> 只能有一个 - 注释: <!-- 注释的内容 --> 5

我所整理的float, inline-block还有position:absolute

这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu.com/question/24529373/answer/29135021 http://www.w3cplus.com/css/inline-blocks.html 感谢你们的无私分享以及钻研的精神. 浮动最早是用来实现文字环绕图片用的,而不是像现在很多地方用来砌砖头用. inline-bloc