原因分析：

chorme和firefox浏览器下当缩放窗口大小时，边框的计算宽度变大造成内部div宽度的计算宽度变大，外部div放不下内部div而溢出。

解决办法：

给内部div设置

box-sizing:border-box;　

对于不支持box-sizing的ie8-浏览器另写css样式解决

<!--[if lt IE 7]>

<link rel="stylesheet" href="ie7.css">

<![endif]-->

　　

外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法的更多相关文章

  1. 盒模型大小取决于它的padding，margin，border数值

    盒模型规定了元素框处理元素内容width与height值.内边距padding.边框border 和 外边距margin 的数值大小.边框内的空白是内边距padding,边框外的空白是外边距margi ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. CSS文字，文本，背景，盒模型等记录

    文字: font-family:" "; /*设置字体*/ font-size:6px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bo ...

  4. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  5. CSS基础：块级元素与盒模型

    简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...

  6. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  7. CSS概念 - 可视化格式模型（一） 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  8. 盒模型Box Model（浮动）

    一.标准盒模型的大小:border+padding+content(width)        怪异盒模型大小:padding+border   二.display inline  默认,且变为行由内 ...

  9. 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

随机推荐

  1. linux Email 体系

    大致了解了DNS与邮件服务器之间的关系后,接下来我们介绍邮件到底是如何传送到目的邮件主机的.下面我们分成“寄信”与“收信”两个主要的邮件服务器使用方式进行介绍.先说明关于“寄信”的部分.通常我们都是使 ...

  2. 什么是IOC为什么要使用IOC

    概念: 作用: 结论:借助于“第三方”实现具有依赖关系的对象之间的解耦 在使用IOC之前的情况 如果有一个齿轮出了问题,就可能会影响到整个齿轮组的正常运 使用IOC之后 对象A获得依赖对象B的过程,由 ...

  3. 终于等到你，最强 IDE Visual Studio 2017 正式版发布

    Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...

  4. rxjs 常用的静态操作符

    操作符文档 API create const { Observable } = require('rxjs'); // 创建 Observables var observable = Observab ...

  5. HashSet TreeSet

    1 HashSet 1.1 父类 java.lang.Object 继承者 java.util.AbstractCollection<E> 继承者 java.util.AbstractSe ...

  6. ESP8266 nodemcu

    主要资料来源于一下几个网站 1.nodemcu官网:此处有几个示例和github(用处不大) 2.用户说明:http://nodemcu.readthedocs.io/en/master/  (非常重 ...

  7. java8集合--LinkedList纯源码

    package Queue; import java.util.*; import java.util.function.Consumer; /** * 双端队列主要实现list接口和Deque接口, ...

  8. python循环字符转换

    pyhon函数传参的时候穿的是引用,而不是实际值,这样可以节省内存 变量名要求:最好是以字母下划线作为变量名,不能和py关键字重复 import getpass提供了平台无关的在命令行下输入密码的方法 ...

  9. adg的数据传输应用三大模式转换

    1.最大可用性模式(Maximum Availability) 1)该模式提供了仅次于"最大保护模式"的数据保护能力: 2)要求至少一个物理备库收到重做日志后,主库的事务才能够提交 ...

  10. LeetCode 283 Move Zeroes 解题报告

    题目要求 Given an array nums, write a function to move all 0's to the end of it while maintaining the re ...