Browser compatibility: Must-see solutions to common problems in Web standardized website building (DIV CSS)_html/css_WEB-ITnose

 

   开始学习网页的布局的时候经常遇到这个问题，现在网上copy人家的文章贴到这里来吧！希望能有帮助。  

  经常我们用DIV+CSS建站的时候，发现在IE6,IE7,Firefox里面显示经常一塌糊涂，而在外贸网站建设中，因为浏览着对象是国外，Firefox的市场份额很大，为了让我们的客户能看到一个完美专业的显示效果，所以Firefox必须考虑！

以下是一些常见问题和解决方法

1、居中问题
div里的内容，ie默认为居中，而ff默认为左对齐。
使ff内容居中的方法是增加代码margin:auto;

 

2、高度问题
设有两横行div排列，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在ff中会出现两个div重叠的现象；但在ie中， 下面的div会自动给上面的div让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。
或者设置：overflow:hidden

 

3、clear:both;
拿footer为例，有时候如果上面使用 了float控制的n列的布局，那么在用ff浏览时footer很有可能不老实，到处乱动??因为他还在受到浮动（float）的控制。如果想让它老老实 实呆在页面下方，在footer的div中写入clear:both;就可以达到效果了！

 

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

5、重点讲解：display:block,inline两个元素 display(显示)
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果

Display:block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

,

,

,

,

和
• 是块元素的例子。

  display:inline就是将元素显示为行内元素.
  inline元素的特点是：
  和其他元素都在一行上；
  高，行高及顶和底边距不可改变；
  宽度就是它的文字或图片的宽度，不可改变。
  , , , , , 和是inline元素的例子。

  例子：
  
  
  
  
  
  
  
  

  
  

  
  
  • 天天招生网
    
  • 心血管网
    
  • 高血压网
    
  • 先心病网
    

  
  
  
  

  
  

  
  

  
  
  • 天天招生网
  
  
  • 心血管网
  
  
  • 高血压网
  
  
  • 先心病网
  
  

  
  
  
  
  
  

  
  6. Problems with IE and FF width and height
  min -width is very convenient CSS command, which can specify that the minimum element cannot be less than a certain width, so as to ensure that the layout is always correct. The overall narrowest is 770px and the widest is 1024px. In other words, if the window is smaller than 770xp, the bottom scroll bar will appear. If the window is larger than 1024px, the screen will be automatically centered. IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. In this way, if you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.
  CSS is designed like this:
  #container{
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
  }

  The first min-width is normal; but the width in the second line uses Javascrīpt, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript's judgment.

  The same method can also be used to achieve the maximum width for IE:
  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression (document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto”;
  }

  
  7. FF: Supported! important, IE ignores it,
  can be used with !important (for example: height:30px!important; height:26px;) to specially set the style for FF
  The vertical centering problem of div: vertical-align:middle; Increase the line spacing Line-height: 200px as high as the entire DIV; then insert text and it will be vertically centered. The disadvantage is that the content must not be wrapped
  cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
  FF: To add borders and background colors to links, you need to set display: block and float: left to ensure no line breaks (the background image needs to be set to float: left). Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge. , if height is not set, you can insert a space in the menubar
  The BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference. Solution:
  div{margin:30px!important;margin:28px;}

  Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute is not recognized by IE, but other browsers can, so it is actually interpreted like this under IE:

  <.>div css xhtml xml Example Source Code Example Source Code [www.52css.com]

  div{maring:30px;margin:28px}
  

  If you repeat the definition, it will be executed according to the last one, so it is not possible Just write margin:XXpx!important;
  In Firefox/Mozilla browsers, the actual width of the object = (margin-left) (border-left-width) (padding- left) width (padding-right) (border-right-width) (margin-right); and in IE/Opera browsers, the actual width of the object = (margin-left) width (margin-right).
  

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn