• rem的使用

浏览器中默认的字体大小是 16px,此时为 100%。当我们在使用 rem 的时候,常常给 html设置为 html{font-size:62.5;},这样的好处是 1rem 刚好为 10px。

同时我们常常写两个 font-size,一个用来兼容不支持 rem 属性的浏览器,在我们使用calc的时候也常常设置两个保证代码的兼容性.

  • 为什么input(text)和button的高度相同却没有对齐

因为 input 的高度算法和button不同,可以说input是非常另类的 (而且在不同浏览器中也是另类的

		.searchBar input{
height: 25px;
box-sizing: border-box;
border: 0;
vertical-align: middle;
}
.searchBar button{
width: 50px;
height: 25px;
border: 0;
vertical-align: middle;
}

如上设置即可,如果不加 vertical-align: middle; 在不同的浏览器(每个浏览器表现不同,比如chrome中情况是button在位置上比input高)中可能还是会不对其,所以加上了。

input和button不同高 和 rem的更多相关文章

  1. input 与 button 的问题 (空隙/不等高/对不齐)及 解决办法

    1. input 与 button 为什么有空隙? - 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)     1. input 与 button 都属于行级块元素,都具有文本 ...

  2. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  3. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  4. input、button、a标签 等定义的按钮尺寸的兼容性问题

    在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...

  5. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  6. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

  7. 苹果iphone手机上input的button按钮颜色显示有问题,安卓却没问题

    苹果手机中会如类似上图,安卓却可以按自己写的来显示 解决办法: -webkit-appearance: none; 以上即可,当然样式中可以加上通用的: 通用:input[type=button], ...

  8. 去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影

    input, textarea, button, a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

  9. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

随机推荐

  1. luogu1353 Running

    dp[i][j]表示走i分钟疲劳值为j时的最远距离 然后搞一下就好啦 #include <iostream> #include <cstdio> #include <al ...

  2. 4445: [Scoi2015]小凸想跑步 半平面交

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4445 题解: 设点坐标,利用叉积可以解出当p坐标为\((x_p,y_p)\)时,与边i- ...

  3. 2.2synchronized同步语句块

    使用synchronized虽然能够避免不同步的现象出现,但是也会出现弊端,比如代码执行时间过长,那么其他线程就必须等待该线程执行完毕释放锁之后才能拿到锁. 面对这种问题可以使用同步代码块来解决. 2 ...

  4. Docker容器里的进程为什么要前台运行

    <第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数,例如apache: ENTRYPOINT [ "/usr/sbin/apache2&q ...

  5. linux下mysql配置查询

    1.查看mysql的数据文件存放位置 show variables; 显示结果中的: datadir的值即是. 2.查看mysql是否支持表分区 SHOW VARIABLES LIKE '%parti ...

  6. HDOJ5438(图的各个连通分量遍历)

    #include<cstdio> #include<cstring> using namespace std; ; template<class T> struct ...

  7. QT4.8.5+qt-vs-addin-1.1.11+VS2010安装配置和QT工程的新建和加载

    1.下载windows下的QT库 QT4.8.5 for vs2010: http://download.qt-project.org/official_releases/qt/4.8/4.8.5/q ...

  8. 【转】 Pro Android学习笔记(三四):Menu(5):动态菜单

    目录(?)[-] OptionsMenu的创建方式 如何再次创建OptionsMenu 每次访问都重新填充菜单项 OptionsMenu的创建方式 OptionMenu在第一次访问该菜单时调用,只调用 ...

  9. [快手(AAuto)学习笔记]如何让程序在运行时请求管理员权限(UAC)

    作者:ffsystem 作为(糟糕的)程序猿,习惯写代码解决一些简单事务.正常用批处理就能解决大部分工作,复杂一点用AutoIt 3. 有时候要分发给别人,就需要一个界面.外行你程序写得如何他看不懂, ...

  10. union联合体学习

    union,中文名“联合体.共用体”,在某种程度上类似结构体struct的一种数据结构,共用体(union)和结构体(struct)同样可以包含很多种数据类型和变量. 不过区别也挺明显: 结构体(st ...