用js拼接html后css样式失效

[SONG_DA]

jquery时间轴数据用js拼接成html之后，样式失效，



$(function(){
var param=location.search;
param=param.substring(1,param.length);
console.log(param);
$.ajax({
type:"get",
url:"qingbaoAction_timeLine.action",
dataType:"json",
data:param+"&mt=5",
success:function(details){
console.log(details);
$.each(details,function(i,n){
if(n.publishedTime!=null){
$('#dates4').append('<li><a href=\"#t4'+i+'\">'+(n.publishedTime.substring(0,10)).replace(/-/gm,'.')+'</a></li>'+'\n');
$('#issues4').append('<li id=\"t4'+i+'\"><h2>'+n.media_name+'</h2><p><a href='+n.url+' target=\"_blank\">'+n.title+'</a></p></li>'+'\n');
}
});
console.log($("#dates4").html());
console.log($("#issues4").html());
}
});

});


拼接出来的结果和原来html里的数据格式完全一样，
原来的是这样：

<ul id="dates4">
<li><a href="#t41">2005.7.24 12:18</a></li>
<li><a href="#t42">2005.7.24 12:18</a></li>
<li><a href="#t43">2005.7.24 12:18</a></li>

</ul>
<ul id="issues4">
<li id="t41">
<h2>2005 闪亮登场</h2>
<p>2005年，呱呱坠地。界面清爽、功能俱全、操作简单易上手，是大家都喜爱的网络家园。出生不久，就有越来越多的朋友到我这里分享自己的生活。</p>
</li>
<li id="t42">
<h2>2006 扬帆起航</h2>
<p>2006年，咿呀学语。面对每天千万级的用户访问，技术GG帮我优化了架构，设计师MM帮我设计了欢迎动画等个性化装扮，“妈妈再也不担心我404了”！</p>
</li>
<li id="t43">
<h2>2007 内外兼修</h2>
<p>2007年，初长成。咱推出了信息中心和好友圈，开始向SNS社区转型；首创4.0全屏模式，更加美观大方。</p>
</li>

</ul>

[天际的海浪]

css和json数据发一下

[SONG_DA]

#dates,#datesp,#dates1,#datesp1,#dates2,#datesp2,#dates3,#dates4,#dates5{width:900px;height:90px;overflow:hidden;} #dates li,#datesp li,#datesp1 li,#dates1 li,#dates2 li,#datesp2 li,#dates3 li,#datesp3 li,#dates4 li,#datesp4 li,#dates5 li,#datesp5 li{list-style:none;float:left;width:170px;height:80px;font-size:24px;text-align:center;background:url(images/biggerdot.png) center bottom no-repeat;} #dates a,#datesp a,#dates1 a,#datesp1 a,#dates2 a,#datesp2 a,#dates3 a,#datesp3 a,#dates4 a,#datesp4 a,#dates5 a,#datesp5 a{line-height:38px;padding-bottom:10px;} #dates .selected,#datesp .selected,#datesp1 .selected,#dates1 .selected,#dates2 .selected,#datesp2 .selected,#dates3 .selected,#datesp3 .selected,#dates4 .selected,#datesp4 .selected,#dates5 .selected,#datesp5 .selected{font-size:38px;} #issues,#issuesp,#issues1,#issuesp1,#issues2,#issuesp2,#issues3,#issuesp3,#issues4,#issuesp4,#issues5,#issuesp5{width:900px;height:300px;overflow:hidden;} #issues li,#issuesp li,#issues1 li,#issuesp1 li,#issues2 li,#issuesp2 li,#issues3 li,#issuesp3 li,#issues4 li,#issuesp4 li,#issues5 li,#issuesp5 li{width:900px;height:300px;list-style:none;float:left;} #issues li h2,#issuesp li h2,#issues1 li h2,#issuesp1 li h2,#issues2 li h2,#issuesp2 li h2,#issues3 li h2,#issuesp3 li h2,#issues4 li h2,#issuesp4 li h2,#issues5 li h2,#issuesp5 li h2{color:#ffcc00;font-size:42px;margin:20px 0;text-shadow:#000 1px 1px 2px;} #issues li p,#issuesp li p,#issues1 li p,#issues2 li p,#issuesp2 li p,#issuesp1 li p,#issues3 li p,#issuesp3 li p,#issues4 li p,#issuesp4 li p,#issues5 li p,#issuesp5 li p{font-size:14px;margin-right:70px; margin:10px; font-weight:normal;line-height:22px;}

[SONG_DA]

[{"media_name":"河北日报","publishedTime":"2016-02-24T00:00:00","title":"文工","url":"http:\/\/hbrb.hebnews.cn\/html\/2016-02\/24\/content_86653.htm"},{"media_name":"河北日报","publishedTime":"2016-02-24T00:00:00","title":"文工","url":"http:\/\/hbrb.hebnews.cn\/html\/2016-02\/24\/content_86657.htm"}]

[hch126163]

开发人员工具审查元素，去找原因。 是否和其他css 冲突

[天际的海浪]

我测试的有样式啊