IE6、IE7、IE8及其他浏览器多个元素并排显示

HTML代码

<div class="line">
<h1>全部input框</h1>
<input placeholder="我是输入框..." type="text"><input placeholder="我是输入框..." type="text"><input type="text" placeholder="我是输入框...">
</div>
<div class="line">
<h1>input span div 组合并排</h1>
<input type="text" placeholder="我是输入框"><span>我是span标签</span><div>我是div</div>
</div>

CSS代码

.line {margin: 10px ;}
.line input,.line span,.line div{display: inline-block;vertical-align: middle;height: 30px;border: 1px solid #eee;width: auto;box-sizing: border-box;outline: none;font-size: 12px;}

原理:

把需要并排显示的元素添加两个属性:内联块状和水平居中

display: inline-block;vertical-align: middle;

注意:并排元素高度要一样才能达到水平居中

还有一个问题是input和div设置一样的高度,为什么input高度会更大一些,原因是input自带padding值,把自身撑大了,可以加box-sizing:border-box解决

IE6、IE7、IE8及其他浏览器多个元素并排显示的更多相关文章

  1. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  2. IE6 IE7 IE8 的函数声明和函数表达式的实现与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  3. 如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  4. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  5. 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

    首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!importan ...

  6. 下拉菜单select高度(兼容IE6/IE7/IE8/火狐等主流浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  8. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  9. 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类: 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE ...

随机推荐

  1. Redis用LPUSH和RPOP实现消息队列

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using ServiceS ...

  2. 关于myeclipse中启动项目(server为welogic10)报valid license.bea错误的问题解决方式

    之前由于重转系统.导致我的weblogic和myeclipse都要重装.重装之后,出现了问题,我是依照weblogic破解版的步骤来的.但还是报例如以下错误: Unable to start WebL ...

  3. Highways - poj 2485 (Prim 算法)

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24383   Accepted: 11243 Description T ...

  4. 【Python + Mysql】之用pymysql库连接Mysql数据库并进行增删改查操作

    用pip下载pymysql并引用 具体请参考文章: <Python之MySQL数据库增删改查操作> <python3.6 使用 pymysql 连接 Mysql 数据库及 简单的增删 ...

  5. PHP资源,库,工具大全

    内容包括:库.框架.模板.安全.代码分析.日志.第三方库.配置工具.Web 工具.书籍.电子书.经典博文等等. 大家可以搜索其它语言,如awesome-java的https://github.com/ ...

  6. JSP 连接数据库JDBC有一定的了解

    JSP 连接数据库 本章节假设您已经对JDBC有一定的了解.在开始学习JSP数据库访问前,请确保JDBC环境已经正确配置. 首先,让我们按照下面的步骤来创建一个简单的表并插入几条简单的记录: 创建表 ...

  7. phalcon builder get raw sql

    $this->modelsManager->createBuilder()->from('table')->where('a = "a"')->lim ...

  8. EasyDSS直播服务器如何帮助用户解决OBS不能同时同步输出多路直播流到直播平台、CDN平台的限制

    最近有用户突然寻求帮助,大概的意思就是说: 他需要同步将桌面的直播同时RTMP发布到:斗鱼.熊猫TV等等多个平台,但是OBS又只能同时采集并发布推流直播到单一个平台,而且有时候在4G或者网络比较差的情 ...

  9. 怎样查看电脑登录过的wifi密码?

    https://jingyan.baidu.com/album/fcb5aff770f7e6edaa4a71d9.html?picindex=7

  10. 九度OJ 1255:骰子点数概率 (递归、DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:316 解决:29 题目描述: 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S.输入n,打印出S的所有可能的值出现的概率. 输入: 输入包 ...