网页页面原结构和CSS写法导致浏览器兼容问题

感觉这个页面比较有普遍性，下面就说说我的解决思路，以及是如何重构的，请同学们在看的同时，先自己分析一下这个页面的结构，以及为什么会出问题？这样理解会更加深刻一些，那幺现在就开始愉快的标准之路吧.
找Bug 篇
原始代码，未做修正：
运行代码框
<!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 runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-CN" />

<title>首页-牛腩新闻发布系统</title>

<style type="text/css">

/*<![CDATA[*/

/*

* 创建人：牛腩

*/

* {   /* 把默认值都设置为0 */

margin:0;

padding:0;

border-width:0;

}

body {

font-size: 14px;

}

a:link,a:visited {

/* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */

color: #000;

text-decoration: none;

}

a:hover {

/* 鼠标移到超链接上的样式 */

color: #00f;

text-decoration: underline;

}

#top, #search, #main, #footer {   /* 公共样式 */

margin: 10px auto 10px auto;

width: 760px;

}

#main {  /* 可变内容区域样式 */

}

ul,li {  /* 项目列表样式 */

list-style-type:none;

}

li {

text-align: center;

margin: 20px;

}

li a:link, li a:visited {

/* 分类名称样式 */

color: #00f;

text-decoration: underline;

font-weight: bold;

}

li a:hover {

color: #f00;

}

.commonfrm {

/* 框架公共样式 */

border:1px solid #DEDFDE;

float: left;

}

.commonfrm h4 {

/* 框架标题样式 */

color: #fff;

background-color: #7BAEEF;

height: 26px;

line-height: 26px;

padding-left: 10px;

font-size: 14px;

}

.commonfrm table {

width: 100%;

text-align: center;

border-collapse: collapse;  /* 细线表格 */

}

.commonfrm table th, .commonfrm table td{

padding: 5px;

}

.commonfrm tr, .commonfrm td {

/* height: 26px !important;

*height: auto !important;    ie7 */

/*  height:auto;    ie6是auto */

}

.commonfrm .th_category {  /* 表格中类别名称列的宽度 */

width: 100px;

}

.commonfrm .th_time {  /* 表格中发布时间列的宽度 */

width: 150px;

}

.commonfrm .td_category {

color: #999;

}

.commonfrm .td_time {

color: #999;

font-size: 12px;

}

#category {

/* 新闻分类框架 */

width: 180px;

height: 368px !important; height: 378px;

margin-right:5px;

margin-bottom: 10px;

}

#newnews {

/* 最新新闻框架 */

width: 560px;

margin-left: 5px;

margin-bottom: 10px;

}

#hotnews {

/* 热点新闻框架 */

width: 560px;

margin-left: 5px;

margin-bottom: 10px;

}

/*]]>*/

</style>

</head>

<body>

<div id="main">

<!-- 新闻分类 -->

<div id="category" class="commonfrm">

<h4>新闻分类</h4>

<ul>

<li><a href="#">首　　页</a></li>

<li><a href="#">体育新闻</a></li>

<li><a href="#">财经新闻</a></li>

<li><a href="#">社会新闻</a></li>

</ul>

</div>

<!-- 最新新闻 -->

<div id="newnews" class="commonfrm">

<h4>最新新闻</h4>

<table>

<tr>

<th class="th_category">所属类别</th>

<th>新闻标题</th>

<th class="th_time">发布时间</th>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

</table>

</div>

<!-- 热点新闻 -->

<div id="hotnews" class="commonfrm">

<h4>热点新闻</h4>

<table>

<tr>

<th class="th_category">所属类别</th>

<th>新闻标题</th>

<th class="th_time">发布时间</th>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

<tr>

<td><a href="#" class="td_category">[体育新闻]</a></td>

<td><a href="#">123456789</a></td>

<td class="td_time">2008-2-59</td>

</tr>

</table>

</div>

</div>

</body>

</html>

								 <div class="pagination"><a title="Page"> <b>1</b>/<b>3</b> </a>   <b>1</b> <a href="/cos/2019/0314/272662_2.shtml">2</a> <a href="/cos/2019/0314/272662_3.shtml">3</a> <a href="/cos/2019/0314/272662_2.shtml">下一页</a> <a href="/cos/2019/0314/272662_3.shtml">尾页</a></div>
			 </div>
			</div>
			   </div>
		<div class="postMore">
				<div class="tab" id="tab">
    <span class="active">相关文章</span>
    <span>大家在看</span>
</div>
<div class="tabdiv">
    <div class="tabpane">
			<ul class="articleBar">
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div>
<div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div>
<div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声   2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div>
<div class="txtInfo"><h3>靠谱助手怎么ROOT  靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div>
<div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div>
<div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div>
<div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div>
<div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div>
<div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div>
<div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div>
<div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
			</ul>
		</div>
	  </div>
    <div class="tabpane">
	<ul class="articleBar">
	<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div>
<div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div>
<div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声   2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div>
<div class="txtInfo"><h3>靠谱助手怎么ROOT  靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div>
<div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div>
<div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div>
<div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div>
<div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div>
<div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div>
<div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div>
</a>
</li>
<li class="imgBar">
<a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml">
<div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div>
<div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div>
</a>
</li>
	</ul>
    </div>
</div>
        <footer>
<p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p>
<div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div>
        </footer> 
		<script type="application/ld+json">
{
	"@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld",
	"@id": "https://wap.easck.com/cos/2019/0314/272662.shtml",
	"title": "网页页面原结构和CSS写法导致浏览器兼容问题-易采站长站",
	"description": "感觉这个页面比较有普遍性，下面就说说我的解决思路，以及是如何重构的，请同学们在看的同时，先自己分析一下这个页面的结构，以及为什么会出问题？这样理解会更加深刻一些，",
	"pubDate": "2019-03-14 T 20:28:49+08:00",
	"upDate": "2019-03-14 T 20:28:49+08:00",
        "data":{
            "WebPage":{
                 "pcUrl":"https://www.easck.com/cos/2019/0314/272662.shtml",
                 "wapUrl":"https://www.easck.com/cos/2019/0314/272662.shtml",
                 "fromSrc":"易采站长站"
             }
        }
}
</script>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
	</body>
</html>