建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > 浏览器兼容 >

非主流浏览器Nascape中CSS的显示与IE的差别

更新时间:2015-12-12整理编辑:建站学习网阅读:0
  尽管Nascape浏览器已经是非主流。但我们从显示差别的研究中,还是可以学习到很多兼容方面的知识,拓展我们的思维。

  我们在进行网页布局的时候要对付的最棘手情况之一是:相同的CSS代码被不同的浏览器解释后会生成不同的效果。在以前,各种不同的浏览器生成极其不同的页面是随处可见的,而现在我们可以用所谓的符合标准的浏览器获得更好的效果。然而,显示效果的差别还是无法避免。

  当前处于领导地位的一些浏览器在处理浮动效果上就存在着这样的差别。假如有人想创建一个能够随着浏览器窗口的大小变化而动态更改大小多栏的布局,那么这将是一个非凡麻烦的问题。

  简单的没有浮动的页面

  假设你有两个div——div#one和div#two,它们都有固定的宽度。假如没有浮动或者绝对的定位,这些div就会以一个摞在另一个之上的形式放在浏览器窗口的左侧(如例A所示),因为标准的页面安排顺序是从左到右,从上到下,块级元素(block-level element)都会在前一个元素下面紧接着开始一个新的行。

  下面是所有例子都需要的一段HTML:

  示例代码
  <body>

  <div id="one">

  Port side text...

  </div>

  <div id="two">

  Second column text...

  </div>

  </body>

  下面的CSS代码用于基本的、不带浮动的版本:

  示例代码
  div#one {

  width: 150px;

  margin: 0px;

  background-color: red;

  }

  div#two {

  width: 300px;

  padding: 0px 10px 5px 10px;

  margin: 0px;

  background-color: silver;

  }

  基本的浮动

  当你创建一个包含有float: left或者float: right属性的CSS样式,并把它应用到诸如div标签这样的块级元素上的时候,div就会从文档的普通文本安排顺序里被删除,并被强制放到包含元素(containing element)的左侧或者右侧。假如包含元素是一个主体标签,那么div就会浮动到浏览器窗口的一侧。否则,浮动的div就会移动到包含div的边缘,而以前是不会这样的。

  假如你有一个以上的浮动元素,那么第二个和随后的浮动元素会紧接着第一个排成一条,其排列方式非常像文本里的一行字母。一系列浮动元素会对齐成一行,直到撑满浏览器窗口的整个宽度,然后换到下一行,就像段落里的文字那样排列。

  固定宽度的浮动

  只要div#one和div#two具有固定宽度,而且其总宽度小于浏览器窗口的宽度,它们就会像例B所示的那样紧挨着排在一起。几个大的浏览器在处理固定宽度浮动的方式上保持着相当的一致性。下面的CSS代码所生成的页面在IE6、Netscape 7、Mozilla 1和Opera 7里显示出来是一模一样的。

  示例代码
  div#one {

  float: left;

  width: 150px;

  margin: 0px;

  background-color: red;

  }

  div#two {

  float: left;

  width: 300px;

  padding: 0px 10px 5px 10px;

  margin: 0px;

  background-color: silver;

  }

  可变宽度的浮动带来了可变的结果

  当你想把div变成宽度可变的时候,生成浮动效果不一致的问题就浮现出来了。例如,假设你想要在页面的左侧放一个固定宽度栏,用于导航按钮的列表,而想在右侧放另外一个栏,让它根据浏览器窗口(的大小)自由扩展和收缩。

  你可能会认为自己用两个左侧浮动的div就能实现这个效果;一个是固定宽度的,而另一个把宽度设定为自动,让div自动调整大小,这样它就能够填补第一个div和浏览器窗口右侧之间的空白。例C就是下面代码显示的结果:

  示例代码
  div#one {

  float: left;

  width: 150px;

  margin: 0px;

  background-color: red;

  }

  div#two {

  float: left;

  width: auto;

  padding: 0px 10px 5px 10px;

  margin: 0px;

  background-color: silver;

  }

  假如在IE里显示这个例子,你会获得预计的效果,即左边是固定宽度的栏,紧挨着它右侧的是一个可变宽度的栏;但是,相同的代码在其他当前流行的浏览器上却会生成不同的结果。第二个div会掉到第一个的下面,而不是接着这一行放在右边。结果就和不带浮动的页面非常类似。

  解决方案

  要获得这种两栏布局,其中一栏能够自动调整大小的理想效果的一种解决方案是对第一栏使用浮动div,但是要从必须调整大小的那一栏里把浮动删掉。由于浮动栏和普通的文档安排顺序是分离的,所以常规的div会被放在上方,但是在浮动div的下方。在左边添加一个padding,并让其等于浮动div的宽度,而常规div的内容看起来就会像是放在左边div右侧的一个栏里。例D说明了这个技巧。下面的代码能够在当前所有的浏览器里生成相同的效果。

  示例代码
  div#one {

  float: left;

  width: 150px;

  margin: 0px;

  background-color: red;

  }

  div#two {

  width: auto;

  padding: 0px 10px 5px 160px;

  margin: 0px;

  background-color: silver;

  }

  尽管当前Netscape/Mozilla浏览器一般都被认为要比IE更加符合标准,但是我个人认为IE生成浮动元素的效果要比前两个浏览器更加一致。但是假如不考虑哪一个生成的效果是“正确的“,那么其差别就会给Web建造者带来最头疼的问题。要避免你的页面设计出现问题,知道浏览器生成的效果会有所不同是第一步,也是最重要的一步。

本文网址:https://www.dedexuexi.com/divcss/llqjr/516.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
解决IE和Mozilla的布局差别的利器:!important
« 上一篇2015年12月12日
css网页布局兼容性有哪些要点与诀窍?
2015年12月12日下一篇 »
  • 兼容各浏览器:CSS定义PNG透明效果
    0阅读
    虽然有CSS有很多方法能实现PNG图片透明效果,但在各浏览器中的兼容效果却不好,小编找到了一个能兼容各浏览器用CSS定义PNG透明效果的方法,方法如下: style .mycls{ width: 48px; height: 48px; backg
  • 图片垂直居中css写法兼容ie6
    0阅读
    头胀胀的,看不下东西做不下事,那就写朵随笔吧。 图片垂直居中,原理应该就是,其实我也不知道。 手上两种方法,异曲同工,但是都兼容ie6的。 复制代码 代码如下: div class=imgBox img src=h
  • CSS兼容性问题 && CSS HACK
    0阅读
    以前做网页的时候,只考虑 IE6 和 FF 的兼容性,公司换了,要求也高了,FF和IE 6 7 8 要全兼容了, 碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为
  • chrome表单自动填充导致input文本框背景变成偏黄色问题解决
    0阅读
    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: 复制代码 代码如下: input:-webkit-
  • 完美解决IE兼容模式问题
    0阅读
    IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式: 复制代码 代码如