zoukankan      html  css  js  c++  java
  • input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论

    input   width,height 值里面, 不包含 border边框和padding内边距,即:设置的只是内容本身的高与宽。border与padding不在值里面,在浏览器上显示可见。

    select  width,height 值里面, 包含 border边框和padding内边距,即:设置的高宽里面包含了内容本身,border与padding的整体。padding值,border,内容是从值里面分走的高宽度,所以内容高宽会相对减小。如果padding值超过了对应值,整体样式会变。

    所以,两者设置相同的值,却会显示不整齐。

     

    下图黄色为border边框,绿色padding,中间的蓝色是内容。

             下图input                  下图select

    input{ height:32px; 200px; }       select{ height:32px; 200px; } 

     

    显示:

    input{ height:32px; 200px; }       select{ height:clac(32px + 2px); clac(200px + 2px); }

    显示:

    input{ height:32px; 200px; padding:10px 10px; }  select{ height:clac(32px + 2px); clac(200px + 2px); padding:10px 10px; }


    显示:

               

     

    以上实验在pc端实用,今天发现在手机端行不通,特此为记:

    在手机端的状态是,width可以设置宽度,而高度用height不顶用,两种方法可以改变高度:

    1.font-size可以撑起宽度,但字体改变了

    2.加上multiple时宽度可用,但option变成多选状态了;

    所以以上都不完美

    解决方法:

        把select放到一个div里面,把div高宽调成与同级input相同,设置overflow:hidden隐藏select溢出,select宽度设成100%,border:none,

    至于垂直居中:由于select不能设高度,就用jquery控制,获取select高度outerHeight, margin-top:div高度减去它除以二,select设display:block。

    好了,说到这里了,下次用到时参考下,在调试吧。

     

     

  • 相关阅读:
    【生活没有希望】poj1273网络流大水题
    SPOJ FASTFLOW网络流水题
    【生活没有希望】hdu1166敌兵布阵 线段树
    【生活没有希望】NOIP2010初赛 烽火传递 smartoj1475
    【填坑向】bzoj2038小Z的袜子 莫队
    (RMQ版)LCA注意要点
    【填坑向】spoj COT/bzoj2588 Count on a tree
    bzoj4364: [IOI2014]wall砖墙
    【听说是线段树】bzoj1012 [JSOI2008]最大数maxnumber
    bzoj4196 [Noi2015]软件包管理器 树链剖分+线段树
  • 原文地址:https://www.cnblogs.com/qing-xuanlvyee/p/3868702.html
Copyright © 2011-2022 走看看