zoukankan      html  css  js  c++  java
  • input文字垂直居中和按钮对齐问题,兼容IE8

    1、盒子模型问题:请CSS重置

    2、按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 ;

    3、IE8文本不居中:line-height属性     注意:IE8不支持font写法(或者某个样式不支持)

    IE浏览器测试到IE8,IE5、6、7慎用。

    问题原因:盒子模型

    1、盒子模型:

    在页面放2个input,一个text文本框,一个button按钮(设置宽高,无任何其他样式)

    input[type='text']{400px;height:45px;}

    input[type='button']{45px;height:45px;}

    观察:IE8:文本框border:1px;padding:2px;

                    按钮border:3px;padding:1px 8px;

    火狐:文本框border:1px;padding:2px;

             按钮border:3px;padding:0px 8px;

    谷歌:文本框border:2px;padding:1px 0px;

            按钮border:2px;padding:1px 6px;

    添加样式,让border,padding一样

    input[type='text']{400px;height:45px;border:1px solid red;padding:0;}

    input[type='button']{45px;height:45px;border:1px solid red;padding:0;}

    观察:

    IE8:文本框border:1px;content:202x47 (IE的盒子模型)

            按钮border:1px;content:45x45 (IE的盒子模型)

    火狐:文本框border:1px;content:200x45

           按钮border:1px;content:43x43

    谷歌:文本框border:1px;content:200x45

           按钮border:1px;content:43x43

    2、按钮对齐方法:浮动(原因是Offset不同没有搜索更多的知识,可以自己补充这方面的知识);

    input[type='text']{400px;height:45px;border:1px solid red;padding:0;float:left;}
    input[type='button']{45px;height:45px;border:1px solid red;padding:0;float:left;}

    参考第2步,自行计算宽高,使其对齐(有的可能没有border,用的背景色代替,请设置border:0;高度自行调整)
    input[type='text']{400px;height:45px;border:1px solid red;padding:0;float:left;}
    input[type='button']{47px;height:47px;border:1px solid red;padding:0;float:left;}

    3、IE8文本居中:line-height     注意   IE8不支持font写法

    将font:normal 18px "微软雅黑";换成font-size:18px;font-style:normal;font-family:"微软雅黑"!

    或者(这样可以用font:normal 18px "微软雅黑";写法,但是有点不是在正中间)
    input[type='text']{400px;height:25px;padding:10px 0px;border:1px solid red;float:left;}
    input[type='button']{47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}

    仅此杂文,留待后用。
  • 相关阅读:
    nginxWebUI
    c#通过串口及CAN模块实现上位及下位机通讯
    使用IDEA创建SpringBoot项目出现intellij idea No active profile set, falling back to default profiles: default
    linux服务器创建python环境
    在Linux服务器上安装anaconda
    牛客-小w的魔术扑克【并查集】
    bzoj#4161-Shlw loves matrixI【常系数线性齐次递推】
    CF903G-Yet Another Maxflow Problem【线段树,最大流】
    P4700-[CEOI2011]Traffic【tarjan,dp】
    CF1039D-You Are Given a Tree【根号分治,贪心】
  • 原文地址:https://www.cnblogs.com/wow1314/p/7008711.html
Copyright © 2011-2022 走看看