Ie html button消失,input 按钮在IE下兼容问题
这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结。所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下。
Html Code:
我先在这里贴出一段初始的CSS样式
CSS Code:
input.form-submit {
border-radius: 3px;//FF下的实现圆角
-webkit-border-radius: 3px;//Safari,Chrome下实现圆角
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
}
我看先来看看效果图吧:
从上图中我们明显可以看出,只有在Firefox下显示才是正常,在IE7和IE下没有圆角效果,这个都是众所周知,但IE7具有一个致命的问题,就是宽度变长了,大家一定会感到奇怪,我们没有定宽度的呀,怎么会这样呢?呆会我们会引用别人的说法了说明这个问题;另外就是Safari和Chrome下高度怎么也不行的呀。
就是因为这样的问题,我纠结了一个下午,但在高人的指点下,还是找到了相关的解决办法,现在我们一起来看看高人是如何解决这样的兼容问题。在IE7下会随着文字的增加导致文本距离按钮左右两侧的间距越来越大,这样就导致了上图中所看到的效果,但该问题存在于IE6/IE7,FF、IE8以及Opera 10没发现类似问题。对于另一情况,小生至今还没有弄明白为什么在Safari和Chrome下会出现高度问题,还希望各位前辈和高手指点。
针对前面的Bug,我对我的CSS稍加做了修改,如下:
input.form-submit {
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #469021;
background: #64A246;
color: #fff;
font:bold 11px arial,sans-serif;
padding: 0.25em 0.5em;
text-transform: uppercase;
height: 27px;
line-height: 19px;
margin: 0;
overflow: visible;
width: auto;
*width: 1;
}
也就是我在以前的基础上增加了以下几行代码
input.form-submit {
height: 27px;//设置行高是为了解决Safari和Chrome下的高度问题
line-height: 19px;//让文字居中显示
margin: 0;
overflow: visible;//只有设置这个属性IE下padding才能生效
width: auto;//现代浏览器下识别
*width: 1;//IE7和IE6识别,设置值为1,我也不知道有何作用,但有些人此处设置值为0
}
这样我们就把那个头痛的问题解决了,大家可以一起看看修改后的效果:
这里提醒大家,对于字居中的问题,不仅受行高影响,而且还受其字体,字号的影响,大家感兴趣的可以尝试一下。
Ie html button消失,input 按钮在IE下兼容问题相关推荐
- Ie html button消失,input 按钮在IE下显现不一致的兼容问题
这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来 ...
- HTML:a、button、input三种标签下的图片按钮
简述: HTML中以下几种方式可以用来创建一个图片按钮(或是图片超链接): a标签 button标签 input标签中的image类型 下面一一示例. 详解: 1.a标签 a标签用于生成超链接,当内嵌 ...
- button 与 input type=button 的区别【2012/07/23】
<button>标签定义按钮.其内部可以放置内容(文本或者图像),这也是它与input创建按钮的不同之处. <button> 控件 与 <input type=" ...
- input按钮中的onclick事件
input按钮onclick事件大全 <INPUT οnclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=B ...
- HTML button 和 input type=“button”的区别 / input type=submit 和button的区别
HTML <button> 和 input type="button"的区别: 1. <button>标签里可以放文本图片等内容,与<input> ...
- button 和input 的区别及在表单form中的用法
先说一下button 和input的定义: <button> 标签定义的是一个按钮 1.在 <button> 元素内部,您可以放置任何内容,比如文本或图像.这是该元素与使用 & ...
- 4-8 :button表单按钮选择器
:button表单按钮选择器 表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取"type"属性值为"button"的<input> ...
- 解析button和input type=”button”的区别
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同 互联网 发布时间:2009-04-02 19:36:01 作者:佚名 我要评论 网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...
最新文章
- “睡服”面试官系列第二十三篇之修饰器(建议收藏学习)
- 博客随笔《文章目录——java》大纲
- Linux 创建并且运行Django项目
- php有个schost.exe_windows找不到svchost.exe(附图)
- Linux清理磁盘空间常用命令
- 淘宝APP用户行为分析
- 深度学习实战8-生活照片转化漫画照片应用
- js获取传统节假日_js判断节假日的代码分享
- 学习C语言基本思路与参考书籍
- 世界上最好用的纯前端模板【没有之一】,AceTemplate高调亮相。
- 计算机专业研究生核心能力培养(0)——计算机专业要不要读研?
- MySQL下载安装 完美卸载
- 印象笔记Evernote 教程
- 史上非常简单、快速的解决Excel导出遇到Excel导出错误
- c++ sprintf()详解
- 【uniapp 动态设置 起始页 默认展示页面 】
- ADC/DAC理论信噪比SNR理解
- 金融行业数字化转型应该如何进行?
- Java+SpringBoot+vue英语单词学习网站
- java计算里程_java_查找里程
热门文章
- 砂.随笔.三十二.Together forever and ever
- oracle ORA-01113的解决方法(file 1 needs media recovery)
- .NET WebAPI 用ExceptionFilterAttribute实现错误(异常)日志的记录(log4net做写库操作)
- PHP mkdir()无写权限的问题解决方法
- springmvc请求参数异常处理
- Maven出现User setting file does not exist ...\.m2\setting.xml的问题解决(同时也解决用户.m2目录下无setting.xml文件)
- 解决vue移动端适配问题
- 同步等待异步操作,为什么Wait()在这里冻结程序
- 如何避免APK文件的反向工程?
- JavaScript:Class.method与Class.prototype.method