【CSS高度塌陷问题与解决办法】的更多相关文章

CSS高度塌陷问题与解决办法

问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应子高度的变化. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度塌陷问题</title> <style type="tex…

CSS浮动布局带来的高度塌陷以及其解决办法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 backgrou…

CSS高度坍塌原因及解决办法

在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱. 解决办法: 1.父元素设置overflow属性设置为hidden; <!DOCTYPE html><html lang="zh-cn"><head> <meta cha…

ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)

ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidScrollView嵌套ListView显示一行高度不正确 1.前言 从谷歌那里找到的ScrollView嵌套ListView只显示一行的解决办法相信很多人都遇到过,然后大部分都是用这位博主的办法解决的吧 刚开始我也是用这个办法解决的,首先感谢这位哥的大私奉献,贴上地址 http://blog.csd…

CSS高度塌陷

问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> CSS: div { border: 2px solid #000;…

关于canvas画布使用fillRect()时高度出现双倍效果解决办法

当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var canvas=document.getEle…

CSS常见兼容问题以及解决办法

浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等. 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CS…

CSS高度塌陷问题解决方案

高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px…

css 浏览兼容问题及解决办法 （2）

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2.margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为 #imfloat{ float:left; margin:5…

当display=none时，元素和子元素高度为0的解决办法

在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那么它们的高度都会是0,就算元素中有文字或者其它内容. 解决办法:通过jquery的show方法先展示出来,再在回调函数中获取它们的高度并操作即可,代码如下:$(".box").show(0,function(){ var h = $(".box").outerHeigh…

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生父子元素外边距重叠 开启BFC后可以包含浮动的子元素 如何开启BFC 设置元素浮动 将元素display属性设置为inline-block.table等 overflow属性设置为非visible值 开启定位 高度塌陷解决方法1: 父元素高度写死 高度塌陷解决方法2: 为父元素也设置浮动 高度塌陷解…

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论它本身是何种元素.元素对象设置了float属性之后,它将不再独自占据一行.浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止.fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素…

css中常见margin塌陷问题之解决办法

塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div> 5 </body> 6 /*CSS部分*/ 7 <style> 8 *{ 9 margi…

CSS基础 margin塌陷问题以及解决 办法

场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动       /* float:left */ 3.将父元素转为行内块元素  /*display:inline-block*/ 注意:1.在行内元素中垂直方向的margin和padding是无效使用的 2.如果两个盒子(块元素),子盒子不设置宽度使用的父元素的宽度,设置margin和padding是…

css 浏览兼容问题及解决办法 （1）

主流浏览器css兼容问题的总结 最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,firefox,ie8.9.11,360浏览器. 一.基本的css兼容: 1.可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 .ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用.上网搜你可能会得到这样的答…

使用Autolayout对多行文本Label进行布局，高度不准确的解决办法！

BUG描述: 今天公司的项目中发现了一个BUG,大概给大家描述一下,tabbleView有一个tableFooterView,这个footView中有一个Label,是多行显示文本,程序用的是Autolayout自动布局,理论上不用操心高度的问题,但是测试发现,在6S Plus上label的文字能全部显示出来,而5S上底部有几行却没有显示出来,用UI调试工具看了下,是Label的高度不对,明显偏小了. BUG分析: 后来查资料发现问题是我的程序中,用masonry自动布局后,在返回footerV…

QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

问题描述 移动端的页面,需要处理首屏为一满屏.并且,采用javascript计算高度来设置容器高度的方案. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=…

IE6 CSS高度height:100% 无效解决方法总结

原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉伸到与父元素一样的高度. 在IE7 8 FF 等浏览器中通过position:absolute;可以使height:100%;正常显示,IE6下无效. 方法一:        使用CSS嵌入JS来实现. _height:expression(document.getElementById('div2…

Chrome不支持css字体小于12px的解决办法

我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现并无效果.后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢? 可以利用css3的缩放属性:transform:scale() .small-f…

Chrome谷歌浏览器下不支持css字体小于12px的解决办法

先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现,在谷歌现在的新版本里已经无效.那么我们应该如何设置谷歌下的字体呢? 我们可以使用到 css3里的一个属性:transform:scale() 属性介绍可以戳这里:http:…

【原】文本图片自适应高度小bug以及解决办法

自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中…

文本图片自适应高度小bug以及解决办法

自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中 点击效果: 注:- (void)layoutSubviews 方法不能同时操作,否则会出现cell的高度错乱 显示: 点击:  …

jetty无法即时更新html、js、css等静态文件的解决办法

网上搜了一大堆方法.最常见的是找到jetty\etc\webdefault.xml文件,找到useFileMappedBuffer参数,把true改为false <init-param> <param-name>useFileMappedBuffer</param-name> <param-value>false</param-value> </init-param> 第二种方法: 在web.xml中添加如下代码即可: <!--…

SpringMVC配置了拦截器（interceptors）却显示不出css、js样式的解决办法

首先因为在web.xml里面配置了 <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 导致所有的连接都会经过DispatcherServlet,会过滤掉css.js等样式,导致页面无法渲染成功 因此需要在springmvc配置文件中放行静态资源 <!…

jquery使用css函数设置背景色无效解决办法

外部的css样式为: #imageArea{ width: 200px; height: 300px; background-color: #eee !important; } 通过 以下代码来修改其背景色是无效的 $("#imageArea").css("background-color", "#444444") $("#imageArea").css("background-color","#…

在Heroku部署时，无法加载 css，js，图片资源解决办法

解决方案: 首先查看Gemfile, 确保group :production do 里添加了 gem "rails_12factor", '0.0.2' 然后在本地执行 rails s -e production 查看是否正常 若本地不正常则执行 rake assets:precompile 然后修改 config/environments/production.rb, 将config.serve_static_assets = false 值改为 true, 让服务器支持静态文件的发…

float浮动造成高度塌陷的解决办法

Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素都浮动了的话,父元素就“瘪”了. 就像下面这样 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">…

整理高度塌陷与BFC

当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 对,没错,这是一个完美的解决方案,但是我们有考虑过这个方案的实现原理吗,或者面试管继续问你这个方法的原理是什么?是不是一脸懵,不懵的也别杠,接下来我通过排他法来展示他的原理 1. 首先 ::after 是元素的伪元素,在元素后面生成伪元素 2.content…

CSS高度坍塌问题的原因以及解决办法

原因: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高.但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t…

css之高度塌陷及其解决方法

浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性 取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位…