原因分析:

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. 一篇文章带你看懂Cloudflare信息泄露事件

    版权声明:本文由贺嘉  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/753847001488039974 来源:腾云阁  ...

  2. sonar-scanner的执行流程和对ClassLoader,动态代理的使用

    最近项目上使用了sonarqube来提供静态代码检查的服务,在看sonar-scanner的源码的时候,发现sonar-scanner用来分析的jar包是从sonar的服务器上下载下来的,使用自定义的 ...

  3. 二叉树的基础题目学习(EPI)

    1.判断是个二叉树是不是平衡二叉树. 二叉树的定义都是利用递归的方法,所以二叉树有着天然的递归属性.所以一般情况下,递归解决二叉树问题中,递归解法比较简洁.平衡二叉树的定义是左子树和右子树均是平衡二叉 ...

  4. Django之ORM那些相关操作

    一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 ...

  5. 10.22crm

    2018-10-23 08:28:41 由于昨晚上断网,所以今天早上补更一下 越努力,越幸运!永远不要高估自己! crm老师就讲三四天,还有明后两天! 主要是讲一些基本使用,自定义配置陪一些东西! 主 ...

  6. Windows小技巧 -- 目录内打开CMD的快捷方式

    工作中常常会有需要在某个文件夹内使用cmd的情况,例如运行某脚本,下面演示几种方法. 以进入以下目录操作为例: 方式一 : 常用的cd命令 cd命令是我们平常使用比较多的方式: 1. Win+R打开c ...

  7. centos 下部署django nginx+uwsgi

    为了建立一个工作站,也是麻烦了.... 感谢该博主: https://www.cnblogs.com/levelksk/p/7921066.html 1.安装centos 后首先安装python,下载 ...

  8. python实现支持目录FTP上传下载文件的方法

    #!/usr/bin/env python # -*- coding: utf-8 -*- import ftplib import os import sys class FTPSync(objec ...

  9. 【RMAN】RMAN-05001: auxiliary filename conflicts with the target database

    oracle 11.2.0.4 运行以下脚本,使用活动数据库复制技术创建dataguard备库报错rman-005001: run{ duplicate target database for sta ...

  10. 读书笔记iOS-Core-Animation-Advanced-Techniques,iOS性能调试工具

    调试卡顿,除了使用timer profile,还可以使用 OpenGL ES驱动工具 OpenGL ES Driver工具显示的GPU利用率,打开Color Blended Layers 我们给图片和 ...