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;这样,其中的内联元素都能以它为标准进行垂直居中。

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

  • 相关阅读:
    Plahte
    Sound 静音问题
    【模板】线段树 2
    winform GDI基础(四)简单截屏
    winform GDI基础(二)画带圆角的矩形框
    winform GDI基础(三)实现画笔
    winform GDI基础(一)
    winform播放视频(windows media player)
    c# 锁的使用
    C#Task学习
  • 原文地址:https://www.cnblogs.com/coolicer/p/2663777.html
Copyright © 2011-2022 走看看