input、button、a标签 等定义的按钮尺寸的兼容性问题
在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下:
例子如下:
HTML:
<button class="btn">Button</button>
<input type="button" class="btn" value="Input Button">
<a href="#" class="btn">A Button</a
CSS:
.btn {
font: 14px/21px Arial;
border: 1px solid #DDD;
padding: 5px 10px;
background: #FFF;
color: blue;
text-decoration: none;
}
a {
display: inline-block;
}
方法一:
①Firefox浏览器会默认设置input[type="button"]的行高为normal。quot: http://www.cssnewbie.com/input-button-line-height-bug/#.UXDOLLVTCEw,如下
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
把行高统一设置为normal,可以解决一部分问题。
.btn{
line-height:normal;
}
②Firefox在私有属性里面额外设置了边框和留白,去掉即可。
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner { border:none; padding:; }
现在Firefox也表现一致了。
③最后,再针对ie7以下的button和input[type=button]随着字变宽的问题做Hack。
.btn {
*overflow:visible ;
}
方法二:
注意:
这个主要是ff和opera下line-height对input['button'],button不起作用,还可以用padding来做,先把line-height置为normal,
button, input[type="button"], input[type="submit"] {
line-height:normal !important;
} input.button, a.button, button {
font: bold 12px Arial, Helvetica, sans-serif;
padding: 5px 8px;
}
补充一句,chrome和firefox会认为type为button的按钮为border-box盒模型,当然IE也是,但是a却以正常的content box盒模型渲染,所以,为了渲染一致,你需要将button声明为content-box。火狐按钮button的宽度,padding置为0是不顶用的,需要使用私有属性,
.btn input, .btn button { -moz-padding-start:npx; -moz-padding-end:npx; }
另外,IE9的button宽度在字数超过八九个汉字的时候带有小数点,这个得测测,一般按钮宽度不会超过这么多的字数。 详见此贴:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3058884
input、button、a标签 等定义的按钮尺寸的兼容性问题的更多相关文章
- HTML中button和input button的区别
button和input button的区别 一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控 ...
- input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...
- 第7天:input和label标签
今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...
- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?
<!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...
- input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.
1.使用disabled input , button textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button : 下面的 onclick ...
- <a>, <input>, <button>的区分与何时使用
像 button 的原始目的就是一个通用的按钮,点击后应该触发 JavaScript, 没有其它附带的隐含的附加效果,<a> 标签的隐含附带效果就是跳转页面到其它地方,而提交表单时应该有一 ...
- input button 与 submit 的区别
在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...
- input放在a标签里面不能选择input里面的文本,IE9点击失效
input放在a标签里面不能选择input里面的文本,IE9点击失效 在IE浏览器中<input type="text" value="test" /&g ...
- android Button 切换背景,实现动态按钮和按钮颜色渐变
android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变 1.右键单击项目->new->Oth ...
随机推荐
- 关于 CentOS 自启动(服务、脚本)
/etc/init.d /etc/rc.local 其实是软连接,所以,实际上看 /etc/rc.d/ 这个文件夹就好了 rc.local 是自启动脚本 正常情况下,用户自定义的服务在 init.d ...
- 明天opp¥this xuexi 资料在高中一班
明天opp¥this xuexi 资料在高中一班
- iOS NSNotificationCenter 移除通知带来的crash
Where to remove observer for NSNotification? 在dealloc方法中移除通知观察者带来crash NSNotificationCenter中的通知消息已经发 ...
- 最强DE 战斗力 (nyoj 541)
题解链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=541 几天前百度题解后用数学知识AC的,后来大牛说这是一道动态规划题. 网上的数学解题链接 ...
- jQuery DOM 元素方法 - index() 方法
元素的 index,相对于选择器 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 jQuery 选择器来指定. 语法 $(selector).index(element) ...
- 上锁 - leetcode
158. Read N Characters Given Read4 II - Call multiple times 题目: The API: int read4(char *buf) reads ...
- ios开发设置不同字体
最近项目开发中遇到需要设置指定字体的需求,研究了一下字体设置,最后附有我写的一个小demo,先来看一下效果: 开始上网搜了一下,普遍说到以下方法 for(NSString *fontfamilynam ...
- CodeForces 706E Working routine
十字链表. 开一个十字链表,矩阵中每一格作为一个节点,记录五个量: $s[i].L$:$i$节点左边的节点编号 $s[i].R$:$i$节点右边的节点编号 $s[i].U$:$i$节点上面的节点编号 ...
- magento里的session传值
1.$registrationCode = Mage::getSingleton('customer/session' )->setData('login_phone_code', $valid ...
- Python学习笔记——基础篇【第六周】——面向对象
Python之路,Day6 - 面向对象学习 本节内容: 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法. 同时可参考链接: http:// ...