谁能帮忙开导一下浏览器兼容问题，可烦死了。_html/css

谁能帮忙开导一下浏览器兼容问题，可烦死了。_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 12:09:44

原創

950 人瀏覽過

<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兼容问题了，是你样式本身写法就有问题。

上面说的外围的层说错了，是新加一个最外围的层来包括所有的内部层，

学习了, 已经解决了, 谢谢大家.