zoukankan      html  css  js  c++  java
  • CSS Cross-Browser Inline-Block

    低版本的IE,火狐 不支持  Inline-Block 属性,想要达到目的我们需要多做一些额外的工作 ,

    参考页面为:https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

    <ul>
        <li>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </li>
    ...
    <ul>
    
    <style>
        li {
             200px;
            min-height: 250px;
            border: 1px solid #000;
            display: inline-block;
            margin: 5px;
        }
    </style>
    

      

    li 标签里面 不要直接写文本字符串 需要用编标包裹,不然inline 会出现奇怪现象,离左边距离 有问题 ,如图1

    用div包裹 恢复正常

    <html>
    <head>
    	<title></title>
    <style type="text/css">
    body{
    	margin:0 0;
    	padding:0 0;
    	font-size:14px;
    	text-decoration:none;
    }	
    ul {
     margin :0 
     padding:0
    font-size: 0;
    }
    li{
    min-height:50px;
    100px;
    background-color:#c90;
    border-bottom:1px dotted red;
    display:inline-block;
    list-style-type: none;
    }
    </style>
    </head>
    <body>
    <div>
    	<ul>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	<li><div>1</div></li>
    	</ul>
    <div>
    </body>
    </html>
    

    Firefox 2  不支持inline-block 但是他支持火狐独有的display 属性:-moz-inline-stack  这个属性和inline-block 很像,如果我们把他放在display:inline-block 前面,当火狐2浏览器遇到的时候会忽略inline-block 而保持-moz-inline-stack,因为他本身不支持inline-block属性 ,如果浏览器支持display:inline-block 那么他就会忽略前面的-moz-inline-stack

     li {
             200px;
            min-height: 250px;
            border: 1px solid #000;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            margin: 5px;
        }
    

     IE 6,IE7  不支持display:inline-block属性,IE 元素haslayout属性,很多bug 由于IE 此属性导致,IE6,7低版本浏览器,width,height属性不能有效触发haslayout 属性,是有些元素不具有布局。

    但是zoom 属性总是能触发IE haslayout 属性。IE 支持display:inline,内联元素, 和其他浏览器不同的是 IE  haslyout=-1(有布局的时候),添加display:inline,相当于其他浏览器的display:inline-block

    IE 6 不支持min-height属性,我们要设置_height:250px,元素在IE 下的高度,_height:250px 在其他浏览器中将被忽略。

    所以最终

    li{
    min-height:50px;
    100px;
    background-color:#c90;
    border-bottom:1px dotted red;
    display:-moz-inline-stack;
    display:inline-block;
    list-style-type: none;
    vertical-align:top;
    zoom:1;
    *display:inline;
    _height: 250px;/*IE 6 不支持min-height:250px;其他浏览器会忽略_height: */
           
    }
    

      

    有时候不是我们失去了目标,而是失去了方向。
  • 相关阅读:
    linux的mount(挂载)NFS 共享,命令详解
    Ubuntu 14.04下NFS安装配置
    linux下实现ftp匿名用户的上传和下载文件功能
    ubuntu apache2配置详解(含虚拟主机配置方法)
    在Ubuntu Server下搭建LAMP环境
    RPM 命令
    阿里云主机ssh 免密码登录
    PHPMailer使用说明
    git的一些基础命令
    穿线
  • 原文地址:https://www.cnblogs.com/871735097-/p/4736191.html
Copyright © 2011-2022 走看看