跨浏览器的元素的竖直排列
- firefox chrome safari使用 column实现;
- ie6 ie7 ie8 使用writing-mode以及其私有的滤镜实现;
这里推荐两篇介绍ie系列的文字属性及兼容的文章:
CSS 兼容性和 Internet Explorer -ms-writing-mode Attribute | writingMode Property 蓝色理想关于文字竖排的讨论 The CSS Corner: writing-mode
writing-mode和layout-flow都能实现文字从右向左,从上到下的排版,而且相对于整个元素的90度旋转方法而言,这两个属性只针对元素内部的子元素排版,不会造成因为旋转宽高定义混乱、对外布局不好把握等现象。不过ie6不支持tb-lr的writing-mode值,而只支持tb-rl和lr-tb,这就像古人的竖写方式从上往下和从右往左。 ie6 ie7 ie8对writing-mode的支持情况:http://msdn.microsoft.com/en-us/library/ms531187.aspx 各个值的具体表征: 总结如下:
/*writing-mode: lr-tb;*/ /*ie6 ie7 ie8*/ /*writing-mode: tb-rl;*/ /*ie6 ie7 ie8*/ /*writing-mode: rl-tb;*/ /*ie7 ie8*/ /*writing-mode: bt-rl;*/ /*ie7 ie8*/ /*writing-mode: tb-lr;*/ /*ie8*/ /*writing-mode: bt-lr;*/ /*ie8*/ /*writing-mode: lr-bt;*/ /*ie8*/ /*writing-mode: rl-bt;*/ /*ie8*/
为解决这个问题,这里使用ie的翻转滤镜来解决,父元素翻转一次,子元素也得再翻转回来,而翻转之后的宽高和对外布局不影响。 以下使用了inline-block的display值,ie6和7使用*display:inline; *zoom:1;触发hasLayout来模拟实现。 代码如下(ie下浏览):
转载于:https://www.cnblogs.com/defims/archive/2011/06/20/2946701.html
跨浏览器的元素的竖直排列相关推荐
- 浮动—春联(文字竖直排列)
<div id="main"><div class="top">李白</div><div class="le ...
- java安卓字体_Android中添加外部字体库和竖直排列字体
一.在Android开发中会遇到系统提供的字体并不能满足自己对字体的设计需要,这就需要引进外部字体库了.下面简述一下如何引入外部字体库. 1>在自己工程文件目录下新建一个assets文件夹,在a ...
- android中TextView设置字体竖直排列
在实际开发中有需要设计文字的排列为竖向,那么在textview的属性中有这样一个属性android:ems="" 这里的ems表示一行显示的字符个数,那么我们只需要设置为:andr ...
- table 竖直排列(垂直排列)
有更好的实现方法欢迎留言! 效果: writing-mode: vertical-lr; writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向.为整个文档设置书时,应在 ...
- html表格两个竖直排列,基于elementUI竖向表格、和并列的案例
效果图如下 代码 :show-header="false" :data="tableData" :span-method="objectSpanMet ...
- 安卓TextView设置字体竖直排列
1.属性介绍: 安卓中有一个属性为android:ems="x" x表示一行显示的字符个数. 2.具体操作 第一步:设置控件宽度为包裹内容android:layout_width= ...
- highcharts特殊定制:x轴文字竖直显示(兼容各浏览器)
做项目要用到highcharts画柱状图,可是x轴数据过多,如果文字从左至右显示显得拥挤不堪,于是想竖起显示,于是想到用xAxis的rotation属性,把文字旋转90度,可是这样文字显示虽然是竖直但 ...
- html 纵向选项卡,竖直选项卡式面板的实现_html/css_WEB-ITnose
前面的话: 我是html的初学者,懂得一些html的基本知识.最近开始学css,不会JavaScript.了解到adobe dw cs5的插入->spry有选项卡式面板的设计,对这个很感兴趣.但 ...
- CSS | DIV 水平和竖直方向居中
1.竖直方向: 最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中. 以往的经验: display: inline-block; vertical-align: middle; 就可以解决.但是这 ...
最新文章
- 工控图表控件ProEssentials改变子集的颜色和线条风格
- Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法
- Dw序号列表如何通过html语言加,使用DW软件实现html编码转换的详细步骤
- arduino使用oled代码_如何做一个Arduino无线气象站
- python自动化办公真的好用吗-用 Python 自动化办公,我与大神之间的差距一下就拉小了...
- osea/Beat Classification 4.3-4.5
- android realm jar包,android-Realm支持maven或拥有jar的最新资源
- 【邮政编码识别】基于matlab灰度二值化邮政编码识别【含Matlab源码 788期】
- 周记录学习总结<大杂烩>
- AsyncTask异步加载给视频截取第一帧图片
- android微信小程序自动填表_微信小程序自动化实战(一)
- Python百日百行代码挑战-day8,day9,day10,游戏实战系列-五子棋
- python学习5(input函数)
- 在线绘图软件——ProcessOn
- 【杂记】如何利用Python3+you-get快速的下载B站的视频(尤其是多P的教程类视频)
- 《Reducing Word Omission Errors in Neural Machine Translation:A Contrastive Learning Approach》论文阅读笔记
- 【粉笔结构化面试】综合分析类
- NAS实现家用服务器
- 计算机键盘分为哪几个键区,标准键盘一般分为哪四个键区
- Idea解决jar包冲突问题