避免和清除宽自适应布局在ie中产生几像素差异的方法

最新推荐文章于 2021-11-03 16:19:10 发布
最新推荐文章于 2021-11-03 16:19:10 发布
阅读量843 收藏
点赞数
分类专栏： CSS 文章标签： ie xhtml div html 浏览器 float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/storm0/article/details/1805985
版权
本文介绍了在IE浏览器下宽自适应布局出现几像素差异的问题及其解决方案。通过调整CSS样式，例如去除高度、使用负margin等方法，可以避免或清除这个问题。同时讨论了不同情况下的处理策略。
摘要由CSDN通过智能技术生成
     标题想了半天也想不到一个好的，感觉怎么写怎么长!- -怕是小学时缩句没学好。

      今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。

      相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来：）

      先写个在不考虑ie情况下的宽自适应的两栏布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>关于自适应宽度布局在IE中的几像素异常</title>
<style type="text/css">
html,body {
 margin:0;
}
#dyhead {
 margin-bottom:5px;
}
#dyhead,#

最低0.47元/天 解锁文章
飘零雾雨
关注
专栏目录
了解CSS盒模型、页面布局在UI设计中的作用
qq_38170252的博客
12-11 623
我司实行UI规范已过去一段时间，页面风格已逐渐实现统一。但近期在实际业务开发中发现，在UI验收环节不断出现小数值调整情况，极大的延长验收时间。 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解，故此篇介绍了css盒模型和组件的概念，以及简单的前端布局思路，UI设计人员在设计时也能结合代码层面考虑，规范前端页面UI标准，减少双方沟通和开发成本。 安卓、iOS、Web布局基本是互通的，因为本人为Web开发，所以从CSS盒模型的角度进行分享。如果你是web前端的初学者，相信这个分享也能给你带来帮助。 CS
<!DOCTYPE html>声明导致布局中div与图片相差5像素的bug
liningjustsoso的专栏
04-18 192
最近一次把网站html头部的声明由 [code="html"][/code] 改成了 [code="html"][/code] 接下来便出现了一些细微的bug。突然发现某些没有设置图片div块会出现相差5像素的bug。 举例代码如下: [code="html"] [/code] 当没有设置div高度的时候。在chrome中审查元素会发现div的高度是105像素。...
html 像素偏差,IE6下绝对定位1px像素偏差解决方案
weixin_28727975的博客
06-03 320
IE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙，这个时候我们只需要给参照物高度设置为偶数即可解决。范例HTML代码bugIE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙fix设为偶数解决CSS代码/* IE6中绝对定位1像素偏差 */.m-demo{position:relative;width:501px;height...
css如何取消已经设置过的宽高属性？
Dark_programmer的博客
11-03 6511
无数经验，都是从教训中得来的 CSS取消宽高属性1.场景描述2.布局、样式3.解决办法 1.场景描述 有层级为3的一组div标签，class名分别为container、wrap、content，需求是当盒子wrap的高度大于盒子container时，可以进行滚动。 但是此时盒子wrap使用了一个全局css样式height：100%，就是说此时container 、wrap高度一致，需要将wrap改为自适应高度（即内容盒子content撑开的高度） 2.布局、样式 <template> .
div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法
10-11 233
简单方法： IE6,IE7,IE8,FF的兼容方法(2) 浏览器兼容代码： 浏览器 符号 IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明：代表能识别； 代表不识别 1、 案例一（常用） 如果各个浏览器的高度都不相同，代码如下： .warp{ Height:100px; /*IE6、IE7、I   浏览器兼容代码：   浏览器 ...
CSS完全兼容IE6、IE7、IE8、IE9和firefox方法【重要】
sunsineq的专栏
06-11 1064
1、圆角 左上角、右上角、右下角、左下角（顺时针） /* Gecko browsers */ -moz-border-radius: 20px 20px 20px 20px; /* Webkit browsers */ -webkit-border-radius: 20px; /* W3C syntax */ border-radius:20px; 2、 (十年积累)div+css完全兼容ie6 ie7 IE8 IE9和firefox方法 简单方法： IE6,IE7,IE8,FF的兼容方法(...
html5 定义width不兼容,CSS-宽度自适应和浏览器兼容笔记
weixin_42322347的博客
06-20 484
自适应宽度自适应：网页元素根据窗口或子元素自动调整宽度适用百分比进行设置，例如：100% 铺满；50% 占据一般宽度块元素如果不设置宽度，默认为100%自适应中可以设置最大或者最小宽度和高度例如：min-height：300px；最小高度为300px；但是在IE6浏览器中不识别 min-height/max-height/min-width/max-width 属性，height 属性在IE6中类...
.clear方法解决网页自适应高度的问题
12-03
但是，这样的做法在IE中会产生一个占据一定高度的Spacer Div，影响页面布局。这时，我们可以使用更复杂但更有效的技巧： `.HackBox{border-top:1px solid transparent !important;margin-top:-1px !important;...
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
10-30
4. Firefox和IE对盒模型的理解有差异，可能导致2像素的偏差以及浮动元素`margin`加倍的问题。 5. `ul`在Firefox下默认有`list-style`和`padding`，最好在CSS中进行初始化。 6. 作为外部容器的`div`，不建议设置固定...
IE和FireFox的CSS兼容
04-27
在前端开发中，CSS兼容性是一个常见的挑战，尤其是在处理IE和Firefox这两个浏览器时。由于它们对CSS标准的实现存在差异，导致在不同浏览器下显示的效果可能不尽相同。以下是一些关键点，帮助开发者理解和解决这些...
IE和Firefox之间兼容性问题
04-17
IE（Internet Explorer）浏览器和Firefox浏览器作为市场上较为流行的两种浏览器，在处理CSS样式时存在一些差异，导致开发者在进行网页布局时可能会遇到兼容性问题。本文将详细探讨IE浏览器和Firefox浏览器之间的兼容...
div+css 兼容 ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
weixin_30685029的博客
08-20 135
div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,marg...
ie6 ie7 ie8 ie9和FireFox Chrome中css区别总结
weixin_30325793的博客
08-08 136
本文转载，原文出处http://www.111cn.net/cssdiv/163/44686.htm。 1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,marg...
DIV布局之三行三列左右两栏固定中间自适应
飘零雾雨的专栏
09-29 2510
忙了2个星期，终于有时间整理出下面这篇文章了，呵呵。这个布局其实是在之前两个layout上的一个延伸，做了之前两个，再做一个这样的layout应该不会有什么问题滴，手法都差不多。要使宽度会自适应，顾名思义，就是宽度是不固定的，随外容器变化而变化。而在使用div布局上，就有这么一个优点，div是自动适应容器宽度的。而我们这里要注意的问题仅仅是如何让左右两栏始终固定在原位置，简单点的方法当
如何让DIV在内容不固定的情况下宽度刚好显示完内容
飘零雾雨的专栏
09-29 2344
一般来说，TABLE默认情况下，TD的宽度会随着内容的变化而变化，而且宽度为内容的实际宽度，这样省去了很多容器自适应宽度的代码。由于DIV是block级别元素，DIV的默认宽度是100%的浏览器分辨率宽度。所以在DIV里面的内容不够多时，会有一大段留白：引用代码：测试DIV自适应宽度为正好能显示完内容输出效果：测试DIV自适应宽度为正好能显示完内容由以上的效果我们看到，确实
TabIndex是干什么滴
飘零雾雨的专栏
09-29 2323
TabIndex就是按Tab键有顺序的获取定义过的TabIndex元素设置在各个元素之间的焦点。做过表单或者填写过表单的人都会发现，使用Tab键可以逐一获得每个input的焦点。这个东东其实也是可以修改的，比如不想被获取，或者改变被获取的顺序。在填写表单的时候（注册登录或其它），有很多用户都是不通过鼠标，而直接按Tab键跳到下一个文本框的，等到所有的东东都填好，然后是提交，这是一个非常好和
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值