原因分析:

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

解决办法:

给内部div设置

  1. box-sizing:border-box; 

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

  1. <!--[if lt IE 7]>
  2. <link rel="stylesheet" href="ie7.css">
  3. <![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. 我的第一篇paper

    找实习虽然只为自己争取到一个秋季的绿色通道,但可喜的是,我投的几篇paper,终于中了一篇. 现在可以在英文数据库或google scholar上面搜索到自己名字,感觉很nice,研究生的心愿算是完成 ...

  2. MVC和普通三层架构的区别

    MVC和普通三层架构的区别 其中这里的模型(Model)和视图(View )是完全区别于三层架构中的模型(Model)和视图(View)的. MVC 1)MVC中的模型(Model)指的是数据模型,用 ...

  3. C# 如何提取字符串中的数字

    下面讲解如何在字符串当中抓取到数字 方法一.使用正则表达式 1.纯数字提取 string str = "提取123abc提取"; //我们抓取当前字符当中的123 string r ...

  4. H - Being a Good Boy in Spring Festival

    一年在外 父母时刻牵挂 春节回家 你能做几天好孩子吗 寒假里尝试做做下面的事情吧 陪妈妈逛一次菜场 悄悄给爸爸买个小礼物 主动地 强烈地 要求洗一次碗 某一天早起 给爸妈用心地做回早餐 如果愿意 你还 ...

  5. 配置数据源的三种方式和sql心跳的配置

    三种方式配置数据源连接池: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  6. ASP.NET与ASP.NET Core用户验证Cookie并存解决方案

    在你将现有的用户登录(Sign In)站点从ASP.NET迁移至ASP.NET Core时,你将面临这样一个问题——如何让ASP.NET与ASP.NET Core用户验证Cookie并存,让ASP.N ...

  7. [No0000156]天干地支-狗年我懂,戊戌二字怎么来的?

    话说,这几年的年份,总能让人联想到历史课本.比如,2014年是甲午马年,是中日甲午战争120周年.而2018年是戊戌狗年,嗯,戊戌变法也过去120年了…… 狗年相信大家都了解,小观前面两期关于反犬旁和 ...

  8. -bash: fork: Cannot allocate memory

    今天遇到服务器无法SSH,VNC操作命令提示fork:cannot allocate memory free查看内存还有(注意,命令可能要多敲几次才会出来) 查看最大进程数 sysctl kernel ...

  9. jcgrid

    1.jcgrid实现 <span class="JcGrid" id="MyGrid" listdata="Rds.List.UserList& ...

  10. MyCAT 在 Cobar 的基础上,完成了彻底的 NIO 通讯,并且合并了两个线程池

    研读: 1.http://www.mycat.io <Mycat权威指南> 第 2 章 Mycat 前世今生: 浏览: 深度认识 Sharding-JDBC:做最轻量级的数据库中间层 - ...