`
bnmcvzx
  • 浏览: 10254 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

input垂直居中 ie6 ie7 firefox chrome

阅读更多

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{

    font-size:12px;              

    height:14px;

    padding:5px;

    line-height:15px;

}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2。

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

1
1
分享到:
评论

相关推荐

    chrome、firefox、IE中input输入光标位置错位解决方案

    本文主要探讨的是在Chrome、Firefox和IE浏览器中,`<input>` 输入框内光标位置出现错位的问题及其解决方案。 问题的起因在于开发者通常会为了美观或者功能需求,使用背景图片来模拟`<input>`输入框的样式,并通过...

    Firefox专属hack的写法介绍

    important`来为Firefox单独设定样式,但随着IE8、Opera、Chrome等现代浏览器的出现,这种方法已经不再适用,因为这些浏览器同样理解`!important`规则。因此,我们需要寻找一种只被Firefox识别的CSS语法来进行hack。 ...

    input 按钮在IE下显现不一致的兼容问题

    在IE7和IE6浏览器中,input按钮的宽度会随着按钮内文字的增加而变长,同时在IE7中,由于没有圆角效果,视觉表现与Firefox等浏览器有较大差异。此外,在Safari和Chrome浏览器下,按钮的高度出现了问题。 为了解决...

    最新web面试题css浏览器的兼容性问题.docx

    例如,Firefox和Chrome中的`small`字体可能比IE7、IE8、IE9中的`small`更大。为了避免混淆,建议直接指定具体的像素值,如`font-size: 16px;`。 5. **td高度的问题**: - 在表格布局中,IE9、IE10、FF和Chrome的`...

    input 按钮显示差异的解决方法

    在实际应用中,可能还需要考虑其他浏览器,如Firefox、Chrome、Safari等。对于现代浏览器,通常可以使用更先进的CSS特性,如Flexbox或Grid布局,来实现更灵活且跨浏览器的按钮样式。然而,对于仍需支持旧版IE的项目...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    在前端开发中,CSS浏览器兼容性问题是一个不可避免的话题,尤其是涉及到旧版本的Internet Explorer(如IE7、IE6)和Firefox。以下是一些针对这些浏览器的兼容性处理方法: 1. **DOCTYPE声明**:DOCTYPE声明对CSS的...

    input button文字的行高在FF下的显示问题

    最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式: 复制代码代码如下: input#button { border: 2px ...

    调整input里面的输入光标大小并兼容主流浏览器

    在Chrome和FireFox浏览器中,可以设置input的height属性较小,并通过padding填充剩余空间。同时设定一个合适的字体大小(font-size)。例如: ```css input { height: 16px; /* 设置一个较小的高度 */ padding: 4...

    关于IE7 IE8弹出窗口顶上

    但需要注意的是,这种行为在现代浏览器(如Chrome、Firefox)中可能不受支持,因为它们已经移除了`showModalDialog()`的某些功能,建议使用其他方法(如Bootstrap的Modal或自定义CSS/JavaScript实现)来创建跨浏览器...

    Jquery使用小技巧汇总

    // Firefox 2及以上 } if ($.browser.safari) { // Safari } if ($.browser.chrome) { // Chrome } if ($.browser.camino) { // Camino } if ($.browser.opera) { // Opera } if ($.browser.msie && ...

    如何将网页表格内容导入excel

    这种方法在IE浏览器中较为常见,对于其他浏览器(如Chrome、Firefox),可能需要使用不同的方法,如使用CSV格式或现代Web API来实现类似的功能。在实际应用中,需要根据目标用户群体的浏览器使用情况和安全性要求来...

    前端面试题前端面试题.pdf

    9. 测试过的浏览器包括Chrome、Firefox、IE、Safari等,不同浏览器可能采用不同的内核,如Chrome和Safari使用WebKit内核。 10. `iframe`标签具有缺点,比如可能会引起页面加载速度变慢、不利于SEO优化、存在安全...

    My97DatePicker(几种日历控件/js/实例演示)

    8. **兼容性**:My97DatePicker具有良好的浏览器兼容性,支持IE6+以及现代浏览器,如Firefox、Chrome、Safari等。 9. **易用性**:只需简单的JavaScript代码就可以在网页中引入和初始化My97DatePicker,同时提供了...

    尚硅谷_前端_面试题

    常见的浏览器内核包括:WebKit(Safari、Chrome)、Gecko(Firefox)、Blink(基于WebKit改进,用于Chrome和Opera)。 5. **简述一下你对HTML语义化的理解?** - **HTML语义化**指的是使用有意义的HTML标签来构建...

    CSS网页制作 表单button的行高问题

    `line-height`用于设置元素内文本的行间距,但在Firefox和Opera浏览器中,对`button`元素的`line-height`处理方式与其他浏览器如Chrome、Safari和IE8等不同。 在示例代码中,我们可以看到一个`<input type="submit...

    web前端笔试面试

    - **Gecko**: Firefox。 - **Trident/Blink**: IE/Edge (旧版)。 **7. HTML5的新特性、移除的元素及处理兼容性问题?** - **新特性**: 新增语义化标签(如`<header>`, `<nav>`)、多媒体标签(如`<video>`, `...

    5月最新大厂前端高频核心面试题.pdf

    2. 常用浏览器包括Chrome、Firefox、Safari、IE/Edge等,它们的内核分别是Blink、Gecko、WebKit、Blink/EdgeHTML。 3. 浏览器内核通常指渲染引擎,负责解析HTML和CSS,执行JavaScript脚本以及绘制网页。 4. 标准...

    KODExplorer 芒果云-资源管理器

    [关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data...

Global site tag (gtag.js) - Google Analytics