ブラウザの互換性: Web の標準化された Web サイト構築における一般的な問題の解決策 (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. IE と FF の幅と高さの問題
  min -width は、最小要素を指定できないことを指定できる非常に便利な CSS コマンドです。レイアウトが常に正しいように、一定の幅よりも小さくする必要があります。全体の最小値は 770px、最大幅は 1024px です。つまり、ウィンドウが 770xp より小さい場合、ウィンドウが 1024px より大きい場合、画面は自動的に中央に配置されます。 IE は min- の定義を認識しませんが、実際には通常の幅と高さを min があるかのように扱います。このように、幅と高さだけを使用する場合、この 2 つの値は通常のブラウザでは変更されません。 min-width と min-height だけを使用する場合、IE では幅と高さはまったく設定されません。 。
  CSS は次のように設計されています:
  #container{
  min-width: 600px;
  width:expression(document.body.clientWidth }

  最初の min-widthは標準ですが、2 行目の幅には IE でのみ認識される Javascript が使用されているため、HTML ドキュメントの形式が低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

  同じ方法を使用して IE の最大幅を実現することもできます:
  #container
  {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px” : ”auto”;
  }

  
  7. FF: ! important をサポート、IE は無視します、
  を使用できます (例: height:30px) !重要; height:26px ;) FF の特別なスタイルを設定します
  div の垂直方向のセンタリングの問題:vertical-align:middle; 行間隔を DIV 全体と同じ高さに増やします、line-height:200px;次にテキストを挿入します。欠点は、コンテンツが垂直方向に中央に配置されないことです。
  カーソル: IE FF ではカーソルの指の形を同時に表示できます。IE のみで可能です。
  FF: リンクは境界線と背景色を追加します。改行がないようにするには、display: block を設定し、float: left を設定する必要があります (menubar を参照すると、a と menubar の高さを設定するのは、下端の位置ずれを避けるためです)。高さが設定されていない場合は、メニューバーにスペースを挿入できます。FF と IE では、BOX モデルの解釈に一貫性がなく、結果として 2px の違いが生じます:
  div{margin:30px! important;margin:28px;}
  Ajie 氏によると、! important 属性は IE では認識できませんが、IE では次のように解釈されます:

  div css xhtml xmlソースコード例 [www.52css.com]

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

  定義を繰り返すと最後の定義が実行されるため、単に margin:XXpx! important;
  

  と書くことはできませんFirefox/Mozilla ブラウザの場合、オブジェクトの実際の幅 = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin -right); IE/Opera ブラウザでは、オブジェクトの実際の幅 = (margin-left) + width + (margin-right)。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。