首页 web前端 html教程 DIV+CSS相对IE8的兼容问题_html/css_WEB-ITnose

DIV+CSS相对IE8的兼容问题_html/css_WEB-ITnose

Jun 24, 2016 pm 12:27 PM

CSS技巧:

1.div的垂直居中问题

     vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 

2. margin加倍的问题    

     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;   

     例如: 相应的css为 #IamFloat{float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/} 

3.浮动ie产生的双倍距离    

     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}   

     这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元              素);     #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;   

4 IE与宽度和高度的问题

     IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,

     如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。     比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,

     可以这样:     #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}  

5.页面的最小宽度

      min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当 做最小宽度来使。为了让这一命令         在IE上也能用,可以把一个

放到 标签下,然后为div指定一个类, 然后CSS这样设计:   

   #container{ min-width: 600px; width:e-xpression            (document.body.clientWidth

   但第2行的width使用了      Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug

     左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.    

     #box{ float:left; width:800px; border:1px solid #E00;}

     #left{ float:left; width:50%;border:1px solid #E00;}

     #right{ width:50%;border:1px solid #E00;}   

     *html #left{ margin-right:-3px; //这句是关键}    

  

  

  

  

 

7.IE捉迷藏的问题

     当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。    

     有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。

     解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 

8.float的div闭合;清除浮动;自适应高度;  

     ① 例如:这里的NOTfloatC并不希望继续平移,而是希望往下排。

     (其中floatA、floatB的属性已经设置为 float:left;)    这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。

     在 之间加上 这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,

     否则会产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;}   

     ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,

     这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容.

      例如某一个wrapper如下定义:.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}  

     ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

    

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色 的目的,但是我们会发现随着left center right的向下

       拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决   

    

   
   
   
   
  
   
  

     再嵌入一个float left而宽度是100%的DIV解决之  

     ④万能float 闭合(非常重要!)     关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上

class="clearfix" 即可,屡试不爽.     /* Clear Fix */   

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }   

.clearfix { display:inline-block; }     /* Hide from IE Mac */    

.clearfix {display:block;}     /* End hide from IE Mac */     /* end of clearfix */   

或者这样设置:

.hackbox{ display:table; //将对象作为块元素级的表格显示} 

11.高度不适应

     高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。   

     例:#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

                  解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上 border属性。

12 .IE6下为什么图片下有空隙产生

      解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框

    加上 vertical-align:middle;

14.web标准中定义id与class有什么区别吗

      一.web标准中是不容许重复ID的,比如 div    不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

      二.属性的优先级问题 ID 的优先级要高于class,看上面的例子

     三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,

         远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法

     此方法适用与IE与OP浏览器

    

16.为什么web标准中IE无法设置滚动条颜色了

      解决办法是将body换成html

    

    

    

17.涓轰

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

本文讨论了< iframe>将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

我如何使用html5< time> 元素以语义表示日期和时间? 我如何使用html5< time> 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

See all articles