`
keimon
  • 浏览: 72856 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

IE兼容-绝对定位

阅读更多

ie6,ie7在进行绝对定位时,必须同时设置left(right)和top(bottom)值。
代码如下:

<style>
*{
  margin:0;
  padding:0;
}
div{
  width:166px;
  height:122px;
  border:1px solid #000;
  position:relative;
}
p{
  position:absolute;
  bottom:0px;
  left:0px;  /*ie6.7*/
  width:166px;
  height:30px;
  background-color:#666;
  color:#fff;
}
img{
  background-color:#ccc;
  width:166px;
  height:122px;
}
</style>
</head>

<body>
<div>
  <img src="product.jpg" />
  <p>1111111111</p>
</div>
</body>

当未设置p元素的left属性时,p元素未出现在预定位置,如下图左;当设置好left属性shi,p元素显示正常,如下图右。

      图1         图2 
 

 

  • 大小: 7.8 KB
  • 大小: 5.9 KB
0
0
分享到:
评论

相关推荐

    JS绝对定位瀑布流布局(随窗口大小自由变动)

    兼容IE6/7/8,火狐,360,Chrome等各大主流浏览器,绝对定位瀑布流布局,随窗口大小自由布局

    css兼容性问题总结笔记

    7.IE6绝对定位元素的1像素间距bug 5 8. LI中内容超过长度后以省略号显示的方法 6 9. UL的padding与margin 6 10. IE6中min-height 最小高度不识别的解决办法 6 11. IE6中min-width 最小宽度不识别的解决办法 6 12. IE...

    CSS实现两栏布局,左边固定,右边自适应的4种方法

    由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性,所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...

    凤凰网首页广告代码 JS

    重播广告 浮动广告 浏览器的兼容性 IE6的绝对定位 重播广告 浮动广告 浏览器的兼容性 IE6的绝对定位 重播广告 浮动广告 浏览器的兼容性 IE6的绝对定位

    CSS实现三栏布局的5中经典代码

    - 缺点 :兼容性比较差(css3的属性),不兼容IE8及以下 - 优点 :非常有效的解决了浮动和绝对定位的问题 (4)表格布局 : - 缺点 :操作繁琐,当三栏中其中某一栏高度超出时,其他两栏的高度也会自动跟着调整(不符合...

    CSS浏览器兼容性常见问题总结大全(推荐)

    DIV+CSS设计IE6、IE7、FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更...

    web前端开发基本问题解决

    IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中定义id与class有...

    使css兼容IE8的小技巧

    IE8 Beta1已出,其中我们能看到很多的新特性,如layout引擎将“完全”支持CSS2.1和HTML 5,所以和之前IE浏览器所使用的Layout引擎并不相同,之前的IE浏览器并不完全符合互联网标准。

    [原创]基于Jquery的PANEL窗体插件

    10、用户可以自定义当“重定义窗体宽高”、“重定义绝对定位”、“重设置Z-INDEX值”时分别发生的事件方法。其中绑定“重定义窗体宽高”事件很有用,比如用在窗体尺寸变化后,将内容框里的DOM元素重新Resize. 本品...

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的...这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: 复制代码代码如下: &lt;#div id=”imfloat”&gt; 相

    利用label标签和CSS美化文件上传表单(不兼容IE6)

    上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给... 有了一个可以触发file表单的按钮,只要通过绝对定位将file表单从文档流中拖出,然后用z-index属性将它的层级提升到比butt

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码。而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名,并且需要写到页面的最上面。 ...

    网页模板制造工厂源码

    浏览器兼容:ie6,ie7,ie8,chrome 1.采用asp.net2.0技术 2.内置大量模板/元素+自动转table定位技术 pmaker_s_api目录下的tuLib_bg,tuLib_contbg,tuLib_pic目录 为图片元素库 3.可拖拽拖拉式编辑布局网页,不会打字也...

    《CSS设计彻底研究》【中文PDF+源代码】

    4.2.3 absolute(绝对定位) 4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平...

    CSS 浏览器兼容问题整理大全(比较全)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-...

    ie下的css层叠z-index各种问题详细整理

    可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),所以这次开发中不可避免的碰见了几个问题,尤其是在IE下的 z-index 问题很有意思,所以整理了一些资料和总结分享给大家…注...

    比较全的CSS浏览器兼容问题整理总结

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS ...

    div+css通用兼容性代码整理

    一、Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码代码如下: &lt;style&gt; *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:...

    目前比较全面的浏览器CSS BUG兼容汇总

    其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行...

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!... Tips: 完美解决方案在文末! 一、单行垂直居中 ...

Global site tag (gtag.js) - Google Analytics