用js动态生成html元素,在Chrome,Firefox下样式都正常,在IE8下样式错乱,大神帮忙看下什么情况?

LambertShe 2017-06-27 04:55:57
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<style>
.content{width: 100%;height: auto;}
.content .zhiwei_item{width: 70%;height:120px;margin: 20px 0;background-color: #fafafa;border: 1px solid #dedede;border-radius: 2px;padding:10px;}
.content .zhiwei_item .company_content .title{color:#00b38a}
.content .zhiwei_item .company_content .money{color:red}
</style>
<body>
<div class="content" id="content">



</div>
<div class="paging" style="width: 70%;margin-bottom: 20px">
<span style="float: left" onclick="previous()">上一页</span>
<span class="pageNum">第<span class="atNum"></span>页/共<span class="allNum"></span>页</span>
<span style="float: right" onclick="nextPage()">下一页</span>
</div>
</body>
<script>
var data=[{name:'1php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'2php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'3php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'4php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'5php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'6php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'7php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'8php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'9php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'10php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'11php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'12php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'13php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'14php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'15php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'16php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'17php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'18php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'19php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'20php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'21php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'22php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
{name:'23php[上海-龙华]',time:'08:57发布',money:'2k-4k',jingyan:'经验 应届毕业生/不限',title1:'电商',title2:'web',company:'返利网',type:'电子商务/成熟型(c轮)',fuli:'年终奖金'},
]
//动态创建职位选项
var num=0;
var pageN=1;


function createItem(){
$('.allNum').html(Math.ceil(data.length/10));
$('.atNum').html(Math.ceil(pageN))

for(var i=num;i<(10+num);i++){
var content=document.getElementById('content')
var box=document.createElement('div');
box.className='zhiwei_item';
var company_content=document.createElement('div');
company_content.className='company_content';
company_content.style.float='left';
company_content.style.width='50%';
var p1=document.createElement('p');
var a=document.createElement('a');
var span1=document.createElement('span')
company_content.style.display='inline';
a.href='zhiweixiangqing.html';
a.className='title';
a.innerHTML=data[i].name;
span1.innerHTML=data[i].time;
p1.appendChild(a);
p1.appendChild(span1);
var p2=document.createElement('p');
var span2=document.createElement('span');
var span3=document.createElement('span');
span2.innerHTML=data[i].money;
span2.className='money';
span3.innerHTML=data[i].jingyan;
p2.appendChild(span2);
p2.appendChild(span3);
var p3=document.createElement('p');
var button1=document.createElement('button');
var button2=document.createElement('button');
button1.innerHTML=data[i].title1;
button2.innerHTML=data[i].title2;
p3.appendChild(button1);
p3.appendChild(button2);
company_content.appendChild(p1);
company_content.appendChild(p2);
company_content.appendChild(p3);
box.appendChild(company_content);
var company_content1=document.createElement('div');
company_content1.style.display='inline';
company_content1.className='company_content';
company_content1.style.float='right';
company_content1.style.width='15%';
var img=document.createElement('img');
img.src='https://www.lgstatic.com/thumbnail_120x120/image2/M00/28/A2/CgqLKVaoNWKAe0OyAABN5ej5fvQ571.PNG';
img.style.width='100px';
company_content1.appendChild(img);
box.appendChild(company_content1);
var company_content2=document.createElement('div');
company_content2.style.display='inline';
company_content2.className='company_content';
company_content2.style.float='right';
company_content2.style.width='35%';
var p4=document.createElement('p');
var p5=document.createElement('p');
var p6=document.createElement('p');
var span4=document.createElement('span');
span4.className='title';
span4.innerHTML=data[i].company;
p4.appendChild(span4);
var span5=document.createElement('span');
span5.innerHTML=data[i].type;
p5.appendChild(span5);
var span6=document.createElement('span');
span6.innerHTML=data[i].fuli;
p6.appendChild(span6);
company_content2.appendChild(p4);
company_content2.appendChild(p5);
company_content2.appendChild(p6)
box.appendChild(company_content2);
content.appendChild(box)
}

}


createItem()

//上一页
function previous(){
if(num>0){
num=num-10;pageN--
if(num>=0){
$('.zhiwei_item').remove();
createItem()
}
}
}

//下一页

function nextPage(){
if(num <data.length-10){
num=num+10;pageN++
if(num <=data.length){
$('.zhiwei_item').remove();
createItem()
}
}
}

</script>
</html>
...全文
604 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧