前端福利之表单input按钮在各浏览器之间的兼容性(转)
从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下。
input按钮在各个浏览器之间的兼容性问题,看下边这段代码:
input.item {
background: #4D90FE;
border: 1px solid #4D90BB;
color: white;
}
<input type="submit" value="提交" />
这是很简单的一个input提交按钮,它在各大浏览器中的情况如下:
很明显,我们会看到它在每个浏览器中的效果都是长短不一,参差不齐的,哪个是标准的也不好说。
现在我们来对他进行一个修正,我用的修正样式如下:
.item input {
background:#4D90FE;
border:1px solid #4D90BB;
color:white;
font-family:Arial,sans-serif,Tahoma; 规定同一字体
font-size:12px; 规定同一字体大小
height:25px; 解决Safari和Chrome下的高度问题
line-height:15px; 协调height,让文字居中
overflow:visible; 只有设置这个属性IE下padding才能生效
padding:0 0.5em; chrome、ff默认值;调整其值,让IE和其他浏览器的一样
}
后面有注释的六行就是后来添加的。我们从上图可以看到,chrome下高度”有问题”,不符合我们的预期。
经测试,firefox下给input设置line-height值是无效的。
这应该是firefox中已经给input标签的line- height值定死了,那就只有从height和padding入手了。
经测试,firefox和chrome下,input中padding都有一个默认值padding:0 0.5em;
当我们将padding调至此默认值时发现IE下的input按钮的高度有了变化。
再经过height与line-height协调,最终修复的input按钮效果如下:
这时候可以看到,input按钮的高度在各大浏览器下都一样了。我们来个对比:
我们将input按钮放大并标注他的像素来看看:
经过修正,我们可以让input按钮的高度都达到一致(25px),宽度width方面,
IE7、IE8、IE9、chrome表现的效果都是一致(38×25)的,这次最让我失望就是firefox了,
width居然达到44px。有童鞋可能会说了,宽度不一致,还不是等于没修复吗?
好吧,我认为企图通过纯粹的CSS样式去让input标签样式中各个浏览器达到一致的效果几乎是不可 能的,
这不应该是表单设计需要过于纠结的问题,别在这方面浪费太多时间了。
也不是说完全没有办法的,其中很多用js可以模拟实现一致的效果,最经典的就是 select下拉框。
前端福利之表单input按钮在各浏览器之间的兼容性(转)的更多相关文章
- 表单input按钮在各浏览器之间的兼容性
从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function
在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...
- 才趟过的一个坑,css造成的Validform表单提交按钮点击无效
最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中
HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改 有时候,我们希望 ...
- 清除表单input输入框内数据
清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...
- HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
随机推荐
- Wdatepicker日期控件的使用指南
示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用 示例2-3-3 使用内置参数 示例 2-4-1: 年月日时分秒 示例 2-4-2 时分秒 示例 2-4- ...
- PHP中exit,exit(0),exit(1),exit('0'),exit('1'),die,return的区别
die('1') die()和exit()都是中止脚本执行函数:其实exit和die这两个名字指向的是同一个函数,die()是exit()函数的别名.该函数只接受一个参数,可以是一个程序返回的数值或 ...
- node 中 npm报错 Error: ENOENT, stat 'C:\Users\Administrator\AppData\Roaming\npm'
今天在看node书本时,安装express,看看里面的包.没想到出现这样一种情况. 报错了.后来思考了一下,可能是修改了node的默认安装路径.于是准备在出错的路径下建一个npm文件夹. 注意,有个时 ...
- GSON使用笔记
GSON简介 GSON是Google开发的Java API,用于转换Java对象和Json对象,我在这里将记录一下GSON的简单使用 下载GSON 我们可以在其github仓库中下载,也可以使用Mav ...
- poj 3790 Recursively Palindromic Partitions
/*摘抄自博客:Recursively Palindromic Partitions Time Limit: 1000MS Memory Limit: 65536K Total Submissions ...
- MySQL--产品的起源和状态
MySQL这个名字,起源不是很明确.一个比较有影响的说法是,基本指南和大量的库和工具带有前缀“my”已经有10年以上,而且不管怎样,MySQL AB创始人之一的Monty Widenius的女儿也叫M ...
- Spring Boot自定义配置
一.方法 覆盖自动配置很简单,就当自动配置不存在,直接显式地写一段配置.这段显式配置的形式 不限, Spring支持的XML和Groovy形式配置都可以. 二.原理 @ConditionalOnMis ...
- 局部加权线性回归(Locally weighted linear regression)
首先我们来看一个线性回归的问题,在下面的例子中,我们选取不同维度的特征来对我们的数据进行拟合. 对于上面三个图像做如下解释: 选取一个特征,来拟合数据,可以看出来拟合情况并不是很好,有些数据误差还是比 ...
- 20_java之集合Map
01Map集合概述 A:Map集合概述: 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同 a:Collection中的集合,元素是孤立 ...
- 【Oracle】Oracle改变日志归档模式
一.确认工作模式: 1.查询V$DATABASE SQL>select log_mode from v$database; 归档日志:ARCHIVELOG 2.执 ...