input button和text在不同浏览器中的默认样式

button的width和height和标准的盒模型不一致,是指的包含边框在内的宽度和长度

测试代码:

<!DOCTYPE html>
<html>
<body>
<input id="box" type="text"></input>
<input type="button" value="按钮"></input>
</body>
</html>

1,chrome

(1)text

内容区域:169*15px

padding:1px 0

border:2px;

margin:0

所以总宽度是:169+4=173px

总高度是:15+6=21px;

(2)button

内容区:26*15

padding:1px 6px

border :2px

margin:0

所以总宽度是:26+(6+2)*2=42px

总高度是:15+6=21px;

2,firefox

(1)text:149*16px

padding:2px;

border:1px

margin:0

所以总宽度是:149+6=155px

总高度是:16+6=22px;

(2)button:39*16

padding:0 6px

border:3px

margin:0

所以总宽度是:32+18=57px

总高度是:16+6=22px;

3.ie

(1)text:142.16*15.2

padding:2px 1px

border:1px

margin:0

所以总宽度是:142.16+4=146.16px

总高度是:15.2+6=21.2px;

(2)button:26.66*15.2

padding:3px 10px

border:1px

margin:0

所以总宽度是:26.66+22=48.66px

总高度是:15.2+8=23.2px;

html中换行写了input两个input之间才会有空格的,并不是外边距起的作用,但是button上面有文字的时候会把button撑开,各浏览器的表现也不相同

加了一个空格之后,chrome内容区域加了4px,ie加了6.67px但是firefox宽度没有增加,高度增加了2px...

时间: 2024-10-08 09:00:22

input button和text在不同浏览器中的默认样式的相关文章

Chrome中输入框默认样式移除

Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下:   这在我们未给输入框设置获取焦点时改变边框颜色时,chrome浏览器解析页面中默认将输入框获取焦点时改变边框效果,这给我们带来了极大的方便.如果我们要自己设置边框色时,chrome浏览器的默认操作就给我们的设置(boder:1px solid color)带来了问题,这是你会发现,你的设置在其他浏览器中时有效的,但

input 在 chrome 下 , 自动填充后,默认样式清除

讨厌的自动填充背景色: 解决方法: <style type="text/css"> input:-internal-autofill-selected { background-color: white !important; background-image: none !important; color: rgb(0, 0, 0) !important; box-shadow: inset 0 0 0 1000px white !important; } input:-

记一次项目中的css样式复用

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect 二维码: 一直觉得css是一个不被重视,或者说是重视不够的饭后甜点.因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格...一直都想聊聊css相关的一些杂碎.正好借最近的一次项目实践来侃侃

css知多少(4)——解读浏览器默认样式

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的

input type为checkbox或radio时的click默认事件

在input中,如果type为checkbox或radio时,浏览器会将该input渲染成为系统的单选或多选组件,如果这时,我们在这个input上绑定click事件,那就要小心谨慎使用e.preventDefault()这个方法(jQuery中整合了这个方法使得它能够兼容去掉浏览器中的默认事件).之所以要说谨慎使用,就是,如果你在这个事件的响应程序中判断该checkbox是否选中时,得到的结果和真正的选中状态会有所不同.下面先从一个简单的示例说明这个现象.(为了简单起见,我使用了jquery,他

浏览器默认样式

1 html, address, 2 blockquote, 3 body, dd, div, 4 dl, dt, fieldset, form, 5 frame, frameset, 6 h1, h2, h3, h4, 7 h5, h6, noframes, 8 ol, p, ul,center, 9 dir, hr, menu, pre{ display: block} 10 /* 以上按照block显示,没有规定的则按照默认的inline显示 */ 11 12 li { display:

CSS3初学篇章_6(布局/浏览器默认样式重置)

CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种 布局方式为 div + css 布局. 语义元素 <header>.<nav>.<section>.<article>.<aside&

ie 浏览器文本输入框和密码输入框的默认样式

登录页在ie浏览器上的默认样式 输入框后面的X    密码框后面的眼睛 如下图 解决方案 /*ie文本框背景色*/ input::-ms-clear { display: none; } /*ie文本输入框眼睛*/ input::-ms-reveal { display: none; } 原文地址:https://www.cnblogs.com/yigexiaojiangshi/p/8136899.html

去掉webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

使用Webkit核心的浏览器不管对于开发者还是一般用户都可以说是一个相当优秀的网页引擎,但是在开发中,让人感觉很多余的一个特性就是,在表单项中的控件聚焦时总会出现一个黄色边框(360急速模式是webkit的内核,兼容模式是ie的内核及Trident的内核),特别是input[text]和textarea,并且在textarea右下角还有一个可用鼠标拖动该表textarea大小的功能. 有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效