优艾设计网

CSS遇到一个小问题?关于不同浏览器的兼容性??

优艾设计网 https://www.uibq.com 2023-04-16 15:00 出处:网络 作者:PS教程
我自己写第一个页面,出现了一些浏览器的兼容性问题。 360浏览器运行结果: firefox运行结果: 问题:请问如何将火狐浏览器中的效果调成360浏览器中的结果?我试过将代码中的一部分改为:但是这样的话, 360浏览器就

我自己写第一个页面,出现了一些浏览器的兼容性问题。

360浏览器运行结果:

firefox运行结果:

问题:请问如何将火狐浏览器中的效果调成360浏览器中的结果?我试过将代码中的一部分改为:

但是这样的话, 360浏览器就又显示乱了, 请问如何解决?谢谢

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""><title>百度网址大全</title><style type="text/css"> body {margin:0px;padding:0px;font-size:14px;}/*外部的div*/ .wrapper {width:800px;;margin:0 auto 0;}/*主题内容*/ .main {width:100%;}/*左侧导航*/ .left {background:#FAFBFD;border:1px solid #ace;width:170px;float:left;margin:0 10px 0 0;height:685px;} .left p {height:17px;}h2 {color:blue;font-size:16px;} .left-content {width:150px;margin:0 auto 0;border-bottom:1px solid #ace;} .left-content a {padding:0 9px 0 0;text-decoration:none;color:#004398;text-align:left;} .left-content a:hover {text-decoration:underline;color:#A60514;}/*右侧*/ .right {float:left;height:679.797px;width:618px;}/*右侧上*/ .top {border:1px solid #ace;margin:0px 0 10 0;overflow:hidden;} .top ul {list-style:none;clear:both;height:15px;padding:0;} .top ul li {float:left;width:120px;} .top1 {background:#F0F5FB;margin:0;padding:0;height:30px;} .top1 h2{float:left;padding:0 10px;width:50%;background:#F0F5FB;margin:0;padding:0 10px;height:30px;line-height:30px;} .top1 p{float:right;padding:0 10px;margin:0;height:30px;line-height:30px;} .top a {text-decoration:none;color:#004398;} .top a:hover {text-decoration:underline;color:#A60514;}/*右侧下*/ .bottom {clear:both;border:1px solid #ace;margin:10px 0 0 0;overflow:hidden;} .bottom .title {color:#A60514;text-decoration:none;padding:0 5px 0 10px;} .bottom a {text-decoration:none;color:#004398;padding:0 5px;} .bottom a:hover {text-decoration:none;color:#A60514;} .bottom-t {height:28px;line-height:28px;float:left;} .bottom-b {height:28px;line-height:28px;float:right;} .bg {background:#F0F5FB;height:28px;} .d {height:28px;}/*清除浮动*/ .clear {clear:both;}/*footer*/ .footer {clear:both;} .footer-top {height:45px;border-bottom:1px solid #ffffdffffd;text-align:center;padding-top:30px;padding-bottom:10px;} .footer a {text-decoration:none;color:#004398;font-size:12px;} .footer a:hover {text-decoration:none;color:#A60514;font-size:12px;} .footer-bottom {height:45px;border-bottom:1px solid #ffffdffffd;text-align:center;padding-top:10px;padding-bottom:30px;} .img {text-align:center;margin:5px 0 0 0;} .footer span {color:gray;padding-right:5px;} </style> </head><body> <div class="wrapper"> <!--头部--> <div class="header"> <h1><a href="http://www.baidu.com"><img src="img/baidu_logo.gif"></a></h1> </div><!--主体--> <div class="main"> <!--主体中左边的导航--> <div class="left"> <div class="left-content"> <h2>生活服务</h2> <p><a href="">购物</a><a href="">特价</a><a href="">海淘</a><a href="">查询</a></p> <p><a href="">股票</a><a href="">基金</a><a href="">银行</a><a href="">彩票</a></p> <p><a href="">汽车</a><a href="">违章</a><a href="">地图</a><a href="">菜谱</a></p> <p><a href="">女性</a><a href="">儿童</a><a href="">母婴</a><a href="">健康</a></p> <p><a href="">房产</a><a href="">招聘</a><a href="">手机</a><a href="">旅游</a></p> <p><a href="">机票</a><a href="">酒店</a><a href="">特价游</a></p> </div> <divclass="left-content"> <h2>娱乐休闲</h2> <p><a href="">音乐</a><a href="">游戏</a><a href="">视频</a><a href="">小说</a></p> <p><a href="">美女</a><a href="">图片</a><a href="">QQ&nbsp;&nbsp;</a><a href="">星座</a></p> <p><a href="">体育</a><a href="">NBA&nbsp;</a><a href="">足球</a><a href="">搞笑</a></p> <p><a href="">电影</a><a href="">聚集</a><a href="">综艺</a><a href="">动画</a></p> <p><a href="">军事</a><a href="">头条</a><a href="">娱乐</a><a href="">历史</a></p> <p><a href="">交友</a><a href="">漫画</a><a href="">萌主页</a></p> </div> <divclass="left-content"style="border:0"> <h2 >其他类别</h2> <p><a href="">软件</a><a href="">投资</a><a href="">宠物</a><a href="">爱好</a></p> <p><a href="">数码</a><a href="">杀毒</a><a href="">桌面</a><a href="">摄影</a></p> <p><a href="">考试</a><a href="">课程</a><a href="">英语</a><a href="">学习</a></p> <p><a href="">理财</a><a href="">国外</a><a href="">设计</a><a href="">知识</a></p> <p><a href="">行业</a><a href="">法律</a><a href="">琴棋</a><a href="">曲艺</a></p> <p><a href="">贷款</a><a href="">邮箱</a><a href="">聊天</a><a href="">更多</a></p> </div> </div><!--主体中右边的导航开始--> <div class="right"><!--右边导航的上边部分开始--> <div class="top"> <div class="top1"> <h2>实用查询</h2> <p><a href="">更多>></a></p> </div><div> <ul> <li>·<a href="">天气预报</a></li> <li>·<a href="">火车票•机票</a></li> <li>·<a href="">微信网页版</a></li> <li>·<a href="">快递查询</a></li> <li>·<a href="">星座运程</a></li> <li><a href="">&nbsp;</a></li> </ul><ul> <li>·<a href="">万年历</a></li> <li>·<a href="">签证•办理</a></li> <li>·<a href="">股票理财</a></li> <li>·<a href="">美食外卖</a></li> <li>·<a href="">在线翻译</a></li> <li><a href="">&nbsp;</a></li> </ul><ul> <li>·<a href="">网上地图</a></li> <li>·<a href="">外汇牌价</a></li> <li>·<a href="">彩票•双色球</a></li> <li>·<a href="">电影票</a></li> <li>·<a href="">违章查询</a></li> <li><a href="">&nbsp;</a></li> </ul> </div> </div> <!--右边导航的上边部分结束--><!--右边导航的下边部分开始--> <div class="bottom"> <div class="d"> <div class="bottom-t"> <a href="" class="title">名站</a> <a href="">百度</a> <a href="">新浪</a>•<a href="">微博</a> <a href="">腾讯</a>•<a href="">空间</a> <a href="">搜狐</a>•<a href="">热点</a> <a href="">网易</a>•<a href="">163邮箱</a> <a href="">凤凰网</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div><div class="clear"></div><div> <divclass="bg"> <divclass="bottom-t"> <a href="" class="title">视频</a> <a href="">爱奇艺高清</a> <a href="">土豆网</a> <a href="">搜狐视频</a> <a href="">腾讯视频</a> <a href="">乐视网</a> </div> <divclass="bottom-b"><a href="">更多>></a></div> </div> </div><div class="clear"></div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">游戏</a> <a href="">4399</a> <a href="">7K7K</a> <a href="">17173</a> <a href="">37游戏</a> <a href="">hao123小游戏</a> <a href="">斗鱼直播</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="clear"></div><div class="d"> <div class="bg"> <div class="bottom-t"> <a href="" class="title">新闻</a> <a href="">新浪新闻</a> <a href="">腾讯新闻</a> <a href="">央视网•网信网</a> <a href="">联合早报</a> <a href="">百度新闻</a> <a href="">凤凰新闻</a> </div> <div class="bottom-b"><a href="">更多>></a></a></div> </div> </div><div class="clear"></div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">军事</a> <a href="">中华军事</a> <a href="">凤凰军事</a> <a href="">铁血军事</a> <a href="">米尔军事点</a> <a href="">军事热点</a> <a href="">环球新军事</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">体育</a> <a href="">新浪体育</a> <a href="">NBA资讯</a> <a href="">搜狐体育</a> <a href="">CCTV5</a> <a href="">虎扑体育</a> <a href="">体育直播</a> <a href="">直播吧</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">邮箱</a> <a href="">163邮箱</a> <a href="">126邮箱</a> <a href="">阿里云邮箱</a> <a href="">新浪邮箱</a> <a href="">百度网盘</a> <a href="">139邮箱</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">小说</a> <a href="">起点</a> <a href="">潇湘书院</a> <a href="">百度书城</a> <a href="">纵横中文网</a> <a href="">小说排行</a> <a href="">热门小说</a> <a href="">小说阅读网</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="优艾设计网_设计LOGObg"> <div class="bottom-t"> <a href="" class="title">购物</a> <a href="">淘宝网</a> <a href="">京东商城</a> <a href="">天猫精选</a> <a href="">苏宁易购</a> <a href="">百度糯米</a> <a href="">聚划算</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">商城</a> <a href="">天猫</a> <a href="">国美在线</a> <a href="">聚美优品</a> <a href="">百度MALL</a> <a href="">手机特惠</a> <a href="">特价商城</a> <a href="">1号店</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">数码</a> <a href="">中关村在线</a> <a href="">太平洋手机</a> <a href="">IT之家</a> <a href="">91助手</a> <a href="">乐视手机</a> <a href="">移动•联通•电 信</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">音乐</a> <a href="">百度音乐</a> <a href="">一听音乐</a> <a href="">酷狗音乐</a> <a href="">酷我音乐</a> <a href="">QQ音乐</a> <a href="">经典老歌</a> <a href="">音悦台</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">社交</a> <a href="">百度贴吧</a> <a href="">天涯社区</a> <a href="">世纪佳缘</a> <a href="">珍爱网</a> <a href="">百合网</a> <a href="">六间房秀场</a> <a href="">美女秀场</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">旅游</a> <a href="">携程网</a> <a href="">去哪儿</a> <a href="">途牛旅游网</a> <a href="">同程旅游网</a> <a href="">艺龙网</a> <a href="">12306</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">生活</a> <a href="">58同城</a> <a href="">赶集网</a> <a href="">搜房网</a> <a href="">安居客</a> <a href="">乐居•二手房</a> <a href="">驾校一点通</a> <a href="">中华英才网</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">汽车</a> <a href="">汽车之家</a> <a href="">太平洋汽车</a> <a href="">易车网</a> <a href="">爱卡汽车</a> <a href="">58二手车</a> <a href="">汽车大全</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">财经</a> <a href="">东方财富</a> <a href="">新浪财经</a> <a href="">凤凰财经</a> <a href="">证券之星</a> <a href="">好贷网贷款</a> <a href="">和讯网</a> <a href="">爱投资</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <div> <div class="bottom-t"> <a href="" class="title">银行</a> <a href="">工商银行</a> <a href="">建设银行</a> <a href="">招商银行</a> <a href="">农业银行</a> <a href="">中国银行</a> <a href="">交通银行</a> <a href="">支付宝</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div><div class="d"> <divclass="bg"> <div class="bottom-t"> <a href="" class="title">招聘</a> <a href="">智联招聘</a> <a href="">前程无忧</a> <a href="">赶集招聘</a> <a href="">猎聘网</a> <a href="">应届生求职网</a> <a href="">58同城招聘</a> </div> <div class="bottom-b"><a href="">更多>></a></div> </div> </div> </div> <!--右边导航的下边部分结束--> </div> <!--主体中右边的导航结束--> </div><!-- 底部开始--> <div class="footer"> <div class="footer-top"> <p><a href="">加入百度推广</a>| <a href="">搜索风云榜</a>| <a href="">关于百度</a>| <a href="">网友留言</a></p> </div> <div class="footer-bottom"> <span>©2016 Baidu</span><a href="">使用百度前必读 京ICP证030173号</a> <img src="img/gs.gif"> <div class="img"><img src="img/21.gif"></div> </div> </div> <!--底部结束--> </div> </body> </html>


傻妹 2022-06-11 09:31

优艾设计网_设计LOGO

楼主的这个网页最基础的reset没做好,影响了整个网页的兼容问题


qkoufu6614 2022-06-11 09:41

优艾设计网_电脑技术

图片放到代码段里了。。。看不到。。>_<~


0

精彩评论

暂无评论...
验证码 换一张
取 消