谁能帮忙开导一下浏览器兼容问题,可烦死了。_html/css_WEB-ITnose
<html><head><meta name="keywords" content="博客,梁栋"/><meta name="author" content="梁栋"/><meta name="description" content="个人网站"/><meta http-equiv="Content-Type" content="text/html;charset=gbk"/><title>个人网站</title><style>body {margin : 0;padding 0;}.top_div {margin : 0;width :100%;height : 180px;background-color : yellow;}.top_main_div {width : 960px;height : 180px;background-color : blue;margin-left : 95px;float : left;}.top_log_div {width : 150px;height : 50px;background-color : white;float: right;text-indent : 20px;line-height : 50px;font-size : 20px;}.login {background : pink;padding : 0;margin-right : 20px;}.register {background : pink;padding : 0;}.menu_bar{background : green;width : 100%;height : 50px;}.menu {height : 50px;width : 700px;background : red;margin-left:95px;float : left;}.search_div {height : 50px;width : 100px;background : pink;float : left;}</style></head><body><div class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></div><div class="menu_bar"> <div class="menu"></div> <div class="search_div"></div></div></body></html>
放在IE里是居中的,放在chrome,firefox里就偏左了,布局怎么解决浏览器兼容性的,求标准做法永久解除此类问题困扰。。
回复讨论(解决方案)
我在FF和ie8下看到的都是偏左的
你在定义top_main_div的样式时,不是按照居中显示定义的,而是按照1024*768的分辨率显示的,这样肯定有误差
<center class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></center>
将最外层的 div 改成 center,然后修改相应的样式表,把float和margin-left去掉,即可居中显示了,但在 XHTML 1.0 Strict DTD 中好象不支持
恩。。。http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
这个链接里有答案,要设置display : inline。
display : inline
.top_main_div {width : 960px;height : 180px;background-color : blue;margin-left : 95px;margin:0 auto;}
要居中用 marginleft 和 marginright要同时设成auto,而且不能是浮动的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="博客,梁栋"/><meta name="author" content="梁栋"/><meta name="description" content="个人网站"/><meta http-equiv="Content-Type" content="text/html;charset=gbk"/><title>个人网站</title><style>* { margin: 0px auto; padding: 0px;}.top_div { width : 960px; height : 180px; background-color : yellow;}.top_main_div { width : 960px; height : 180px; background-color : blue; float : left;}.top_log_div { width : 150px; height : 50px; background-color : white; float: right; text-indent : 20px; line-height : 50px; font-size : 20px;}.login { background : pink; margin-right : 20px;}.register { background : pink;}.menu_bar{ background : green; width : 960px; height : 50px;}.menu { height : 50px; width : 700px; background : red; float : left;}.search_div { height : 50px; width : 100px; background : pink; float : left;}</style></head><body><div class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></div><div class="menu_bar"> <div class="menu"></div> <div class="search_div"></div></div></body></html>
写css 要加上
nbsp;HTML>
....
实践多了自然就明白了。要像居中 body{margin:0px auto;} 外围的层.top_main_div{margin:0px auto;} 这个不算是bug兼容问题了,是你样式本身写法就有问题。
上面说的外围的层说错了,是新加一个最外围的层来包括所有的内部层,
学习了, 已经解决了, 谢谢大家.

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
