为什么absolute下margin无效

2024-08-29

绝对定位下margin的作用

以前一直对绝对定位下的margin作用很模糊,今天细看一下不使用top,left,margin等 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

今天有时间,所以特意做了一个测试. 复制代码代码如下: <style type="text/css"> .test-1,.test-2{border:5px solid #F00;} .test-1{border-color:#000;} /*width:100%; height:auto !important;height:1%; zoom:1;*/ .test-2{margin:10px;height:50px;width:500px;} </style>

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “> <div id=”layer2″ style=”position:absolute; background-color:#ccc;”>Absolute (layer2)</div> <div id=”layer3″ style=”margin:30px auto; widt

IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" style="margin:20px; border:1px solid #F88; width:400px; "> <div id="layer2" style="position:absolute; background-color:#ccc;&q

position:absolute和margin：auto 连用实现元素水平垂直居中

有时候,要实现一些元素水平垂直都居中,这部分元素呢可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left:0px; right: 0px; top:0px; bottom: 0px; 但他的父元素要设成相对定位 position: relative; 这样设置完成后会发现子元素并没有居中.这是因为虽然脱离了文档流但是top的bottom的值是相等的.根据优先级会自动向上对齐.同理左右也是如此. 这时

IE6下margin时，float浮动产生双倍边距

今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法对元素float-left,然后再对元素设置margin-left:40px,调试时候,鬼一般的出现了双倍的margin-left,变为80px(同样如果是float-right,margin-right亦是如此) 效果如下: 而在chrome,IE7+,均没有这个现象产生,现象如下: 后来,在样式中给元素添加了一个display

IE下margin:0 auto为什么不居中？

http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:margin:0 auto就可以了,但有时使用margin:0 auto后在FireFox浏览器.谷歌Chrome浏览器里能居中,而在IE678里却不能不居中. 例如以下代码: <style type="text/css"> #con{width:980px;martin:0 au

IE6下margin出现双边距

在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> body{margin:0;} .wrap{float:left;border:2px solid #000;} .box{width:100px;height:100px;background:red;margin:0 100px;float:left; /*display:inline*/ } /* IE

ie6下margin双倍距的问题

今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题, 发现确实如此. 检查了一遍代码, 发现没有什么问题, 测来测去发现也只有ie6会这样, 而且距离始终多了一倍! 百思不解于是就上网搜了下, 发现原来是因为"大名鼎鼎"的ie6margin双倍bug. 解决方案: 解决方案还简单, 只要给对象的css属性加上 display:inline

settimeout()在IE8下参数无效问题解决方法

遇到这个问题,setTimeout(Scroll(),3000); 这种写法在IE8 下不能够执行,提示参数无效, setTimeout(function(){Scroll()},3000);这种方式就可以了.

clone的rails目录下命令无效问题

异常坑爹,在公司克隆自己的项目.然后在项目目录下rails s还有一大堆命令无效,提示 Usage: rails new APP_PATH [options] 找了半天总算找到解决办法了,在项目目录下运行如下命令 rake rails:update:bin (for Rails 4) rails app:update:bin (Rails 5) 不行就 rake app:update:bin

day2-设置position:fixed/absolute无法使用margin:auto调整居中

问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div class="test"> <div class="m-fixed"> </div> </div> css代码: .test{ height: 200px; font-size: 14px; width: 100%; backgro

【linux】ubuntu下crontab无效解决方法

在Debain的docker中启用crontab,踩了一整天的坑,特地记录一下.Debain和ubuntu差不多,故算在ubuntu下面了. 1.第一个坑,安装crontab apt-get install cron 看清楚了,是cron,不是crond啊!在centos下安装需要的vixie-cron之类的东西也根本就不需要啊!!在网上各种适用于centos的教程真是把我坑惨了啊!!!记住,在ubuntu下只需要上面一个指令就够了!!! 2.启动crontab服务 /etc/init.d/cr

12-简单认识下margin

margin margin:外边距的意思.表示边框到最近盒子的距离. /*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; margin-bottom: 100px;

IIS7下,flush无效,解决方案

打开文件 C:\Windows\System32\inetsrv\config\applicationHost.config ,注意如果你的是64位系统,这个文件就必须用64位的编辑软件打开,32位的软件打开会提示文件不存在,就用系统自带的notepad记事本打开就可以了.找到下面这一段,加入红色的那段代码就行了,也就是php这个handler里面加上responseBufferLimit="0". <handlers accessPolicy="Read, Scrip

jquery1.8在ie8下not无效？

// 不需要的name加到下面 var excludes = ['name1', 'name2', 'name3']; $.each(excludes, function (i, v) { excludes[i] = '[name="' + v + '"]'; }); excludes = excludes.join(','); var param = $($('#myform').prop('elements')).not(excludes).serialize();

百度地图在移动端下click无效的解决方案

这是由于百度地图在移动端屏蔽了click事件,在网上找到一种方法,利用touchClick方法来模拟click事件,代码如下(需要JQ插件): //给jquery添加touchClick方法 (function () { var defaults = { start: function (self, event) { }, move: function (self, event) { }, end: function (self, event) { } } $.fn.touchClick = f

表格行与行的间距设置，通过margin无效，要这么设置

CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框值描述 separate 默认值.边框会被分开.不会忽略 border-spacing 和 empty-cells 属性. collapse 如果可能,边框会合并为一个单一的边框.会忽略 border-spacing 和 empty-cells 属性. inherit 规定应该从父元素继承 border-collapse 属性的值. border-collapse属性加上border-spacing属性就可以

1.写页面 2.css的继承属性有哪些 3.margin对布局的影响

1. sparent 透明的 2. placeholder 提示语写页面 1.搞清结构层次 2. 保证模块化让它们之间不能收到影响. (1) 元素性质 (2)标准流浮动带来的脱离文档流撑不起父级的高度的问题可以采用清楚浮动的方式消除影响. absolute 和fixed 带来的脱离文档流撑不起父级高度,使用子元素设置高强制撑起父级. 1.css可以继承的属性哪些? font系列 text系列 color line-height 2.border-radius 值的问题四个值的顺序左上

css的再深入7（更新中···）

1.transparent 透明的 2.placeholder 提示语写页面搞清结构层次, 保证模块化,让他们之间不能受到影响 (1) 元素性质 (2) 标准流浮动带来的脱离文档流撑不起父级的高度的问题可以采用清除浮动的方式消除影响,absolute和fixed带来的脱离文档流撑不起父级的高度,使用子元素设置高强制撑起父级. 1.css可以继承的属性有哪些? Font 系列 text系列 color line-height 2.border-radius的值的问题四个值的顺序是左上