读书人

哪位高手能帮忙开导一下浏览器兼容有关

发布时间: 2012-04-24 14:15:38 作者: rapoo

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


HTML code
<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里就偏左了,布局怎么解决浏览器兼容性的,求标准做法永久解除此类问题困扰。。

[解决办法]
display : inline
[解决办法]
CSS code
.top_main_div {width : 960px;height : 180px;background-color : blue;margin-left : 95px;margin:0 auto;}
[解决办法]
HTML code
<!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 要加上
<!DOCTYPE HTML>
<html>

....
</html>
[解决办法]
实践多了自然就明白了。要像居中 body{margin:0px auto;} 外围的层.top_main_div{margin:0px auto;} 这个不算是bug兼容问题了,是你样式本身写法就有问题。

读书人网 >CSS

热点推荐