声明:小白的笔记,欢迎大神指点。联系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值才正确的更多相关文章

  1. 谷歌浏览器,火狐浏览器,ie浏览器解析顺序

    谷歌(版本 55.0.2883.87 m),火狐(48.0.2),ie(11.576.14393.0)对三个浏览器简单的进行了一下试验发现,谷歌浏览器是等到html全部解析完毕之后才开始渲染,而另外两 ...

  2. 火狐浏览器如何js关闭窗口的几种解决方法

    今天在项目上有一个页面要求在几秒后自动关闭,想着还比较简单,用window.close()就可以了,但是用IE/谷歌/火狐浏览器试了一下,发现IE可以,谷歌用网上的兼容方法也可以实现,但是火狐这里卡住 ...

  3. firebreath 在谷歌和火狐浏览器下的调试 以及打包

    在寻找插件开发资料的过程中找到了一个开发浏览器插件的开源项目——firebreath firebreath的安装以及测试我就不再叙述了,可以参考大神的文章 . http://www.blogjava. ...

  4. Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程

    前言 在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具, ...

  5. 无障碍阅读:页面缩放兼容性处理(zoom,Firefox火狐浏览器)

    1.无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...

  6. 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件

    谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...

  7. 一段能导致火狐、谷歌Safari浏览器崩溃,甚至让iPhone重启的代码

    JavaScript代码,能导致火狐.谷歌Safari浏览器崩溃,甚至让iPhone重启 <html> <body> <script> var total = &q ...

  8. laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题

    遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input ...

  9. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

随机推荐

  1. burp导入证书后仍然抓不到https包

    burp导入证书后仍然抓不到https包 如果你是导入证书有问题,请参考此博客 http://blog.csdn.net/zyw_anquan/article/details/47904495 有一点 ...

  2. Oracle根据【日期】组,其他条件根据PIVOT行转列。使每个日期条件关联的其他数据只有一行。

    select OPER_TIME, MICROPAY, REFUND from ( select trunc(oper_time) oper_time, class_name, sum(total_f ...

  3. SpringSecurityOAuth使用JWT Token实现SSO单点登录

    ⒈认证服务器 1.添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <arti ...

  4. Linux安装JDK(tar)

    我以JDK1.8为例 ⒈下载 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  5. 【转】Python标准模块--importlib

    [转]Python标准模块--importlib 作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 P ...

  6. LwIP Application Developers Manual5---高层协议之DNS

    1.前言 lwIP提供一个基本的DNS客户端(1.3.0后引进),通过使用DNS(Domain Name System)协议来允许应用程序解决主机名到地址的转换. 在文件lwipopts.h里面定义L ...

  7. eMMC基础技术11:flash memory

    [转]http://www.wowotech.net/basic_tech/367.html 0.前言 eMMC 是 Flash Memory 的一类,在详细介绍 eMMC 之前,先简单介绍一下 Fl ...

  8. Eclipse下egit插件的使用

    接触GIT已经很久了,但碰到的公司一直都在使用SVN,并因为各种理由拒绝换成GIT.今年换了份工作,乘着搭建公司新框架和项目的机会,总算在正式项目上使用了GIT.GIT的服务器直接就用了https:/ ...

  9. 给你的Linux系统上点stress【转】

    转自:https://blog.csdn.net/sunvince/article/details/7187768 from: http://blog.yufeng.info/archives/202 ...

  10. httplib urllib urllib2 pycurl 比较

    最近网上面试看到了有关这方面的问题,由于近两个月这些库或多或少都用过,现在根据自己的经验和网上介绍来总结一下. httplib 实现了HTTP和HTTPS的客户端协议,一般不直接使用,在python更 ...