zoukankan      html  css  js  c++  java
  • 炒冷饭之inlineblock

    *在看文章之前假设你接触过inline-block

    自从你知道有inline-block这个东西,你应该不会经常地使用它。因为你知道,在IE6,IE7中是不完全支持的,另一个意思就是部分支持,好了不绕圈,就是IE6,7只有内联元素支持inline-block。由于我有一段时间觉得用inline-block还不如用block,所以就没有用了,因为有兼容性的东西,用起来就是很不爽。今天有点时间所以又去查了点资料,再次熟悉它。

    1、你或许已经知道,只有在表格的td和内联元素中inline-block才起作用。

    是的,这是它的基础。一般人为什么用inline-block,因为它可以有block和inline2种属性。但是碰到IE6的时候,你可以会傻了,怎么你不认识它。事实上,IE5.5就有了这个属性,所以IE6肯定也有。就是因为不完全支持导致了问题。于是我又找了挺多资料,其实都是垂直居中相关的。

    2、它应用于垂直居中。

    在IE8+以及其他现代浏览器,垂直居中可以简单地使用“display:table-cell;vertical-align:middle;”。但是在IE7-(ie7以下),问题又出现了,因为IE7-不认识table-cell,所以你又是要写一堆的hack。最后你发现,原来没有一种方案是非常地好。如果想要垂直居中,可以在网上找找。一直流传2种方案。第一种是针对IE的write mode,这种写法我以前没怎么去写。我直接用了第二种,使用了一个空的内联标签,让它撑满整个容器,再设一个vertical-align:middle;这样,其中的内联元素都能以它为标准进行垂直居中。

    这篇文章纯粹是后记,知识久了就有模糊的地方,还是要炒炒冷饭方可以饱肚。

  • 相关阅读:
    sizeof()和 strlen()的区别 --- 个人笔记
    MySQL 生成自增流水号
    sql 逗号分隔列转行
    【转】.NET中lock的使用方法及注意事项
    【转】在一个SQL Server表中一行的多个列找出最大值
    使用 PIVOT 和 UNPIVOT
    List<T>转DataTable
    C# 分数计算类(加减乘除)
    【转】mysql执行计划介绍
    【转】SQL Server 存储:理解IAM 页
  • 原文地址:https://www.cnblogs.com/coolicer/p/2663777.html
Copyright © 2011-2022 走看看