谷歌、火狐浏览器 缩放为80% 时,margin值才正确
声明:小白的笔记,欢迎大神指点。联系QQ:1522025433。
在网页布局中,通过 谷歌浏览器或火狐浏览器 预览时,发现我们定义的盒模型width,height,margin,padding 值都是不准确的,具体我们来看下面的示例:
css代码:
* {
margin:;
padding:;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
margin-top: 200px;
width: 200px;
height: 200px;
background-color: red;
}
html代码:
<div class="box1"></div>
<div class="box2"></div>
谷歌浏览器中默认缩放为100%时的效果图(火狐一样,就不截图了):

谷歌浏览器中当调整缩放为80%时的效果图(火狐一样,就不截图了):

此实例说明: 火狐或谷歌浏览器自带放大功能(ie没有此问题),这是我们应该注意的。
谷歌、火狐浏览器 缩放为80% 时,margin值才正确的更多相关文章
- 谷歌浏览器,火狐浏览器,ie浏览器解析顺序
谷歌(版本 55.0.2883.87 m),火狐(48.0.2),ie(11.576.14393.0)对三个浏览器简单的进行了一下试验发现,谷歌浏览器是等到html全部解析完毕之后才开始渲染,而另外两 ...
- 火狐浏览器如何js关闭窗口的几种解决方法
今天在项目上有一个页面要求在几秒后自动关闭,想着还比较简单,用window.close()就可以了,但是用IE/谷歌/火狐浏览器试了一下,发现IE可以,谷歌用网上的兼容方法也可以实现,但是火狐这里卡住 ...
- firebreath 在谷歌和火狐浏览器下的调试 以及打包
在寻找插件开发资料的过程中找到了一个开发浏览器插件的开源项目——firebreath firebreath的安装以及测试我就不再叙述了,可以参考大神的文章 . http://www.blogjava. ...
- Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程
前言 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具, ...
- 无障碍阅读:页面缩放兼容性处理(zoom,Firefox火狐浏览器)
1.无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...
- 一段能导致火狐、谷歌Safari浏览器崩溃,甚至让iPhone重启的代码
JavaScript代码,能导致火狐.谷歌Safari浏览器崩溃,甚至让iPhone重启 <html> <body> <script> var total = &q ...
- laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题
遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input ...
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
随机推荐
- Sprng4之JDBC--很原始的使用方法
\[www.dev1234.com]一头扎进Spring4视频教程\一头扎进Spring4源码\[www.java1234.com]<一头扎进Spring4>第九讲 源码\Spring40 ...
- MySql cmd下的学习笔记 —— 有关视图的操作(建立表)
在查询中,我们经常把查询结果当成临时表 view可以看成是一张虚拟表,是表通过某种运算得到的一个投影 在建立视图时,不需要指定视图的列名与列类型 红框内的为select选择语句 蓝框内的与建表语句类似 ...
- 关于VXLAN的认识-----ovs+vxlan多链路负载分担的实现方法
一.应用环境 目前大部分网关或服务器设备常采用双链路同时接入多条ISP链路的方式来满足网络的负载均衡和主备切换等,实现该功能常用的方法是利用策略路由技术,根据链路的网络状况和权重配置在路由时动态选择不 ...
- Python笔记 【无序】 【二】
序列list() ——把一个可迭代对象[可以是字符串,元组]转化为列表,可不带参数——生成空列表,或者带一个迭代器作为参数tuple() ——可迭代对象转化为元组str(obj) ——把obj对象转换 ...
- Linux下查询文件的md5,sha1值
验证下载下来的文件包是不是一致 ··· 验证md5值 #md5sum filename 验证shal值 #sha1sum filename ···
- 876. Middle of the Linked List
1. 原始题目 Given a non-empty, singly linked list with head node head, return a middle node of linked li ...
- Java的static类
首先Java的static类只能是静态内部类.如果在外部类声明为static,程序会编译通不过. 其次,主要了解下static内部类与普通内部类的区别是什么,以及static内部类的作用是什么,详见下 ...
- CentOS7利用systemctl添加自定义系统服务【转】
systemctl enable name.service 设置开机启 systemctl disable name.service 删除开机启动指令 systemctl list-units --t ...
- Python3学习笔记28-HtmlTestRunner
HtmlTestRunner是unittest模块下的一个拓展,用来生成测试报告.原生的可以自己找下下载地址,原生的看着比较丑.这次使用的是经过一些大佬优化之后的.具体GitHub地址:https:/ ...
- C#基础巩固之属性
平常写代码,类中最长用到的字段,属性,方法.虽然经常用属性,但是对属性的认知只是停留在{get;set;}上,也知道可以逻辑判断,只读什么的,没有深入研究: 此篇随笔用来做做属性的文章,加深下认知,文 ...