IE上的有关问题
日期：2014-05-17 浏览次数：20704 次
IE上的问题！
<html>
<head>
<script type="text/javascript">
function CreateGrid(itemHeight, totalWidth, itemNum, bgColor, borderColor, itemText)
{
var div_grid = 0;
var div_subitem = 0;
var strSubInnerHTML = "";
var itemWidth = totalWidth/itemNum-1; //减1是因为要设置右边框
div_grid = document.createElement("div");
for(var i = 0; i < itemNum; i++)
{
if(itemText != null)
{
strSubInnerHTML += "<td style='border:1px solid #0066FF'><div style='width:"+itemWidth+"px;height:"+itemHeight+";margin:auto;position:relative;background-color:"+bgColor+";border-right:solid 1px "+borderColor+";float:left;'>"+itemText[i]+"</div></td>";
}
}
div_grid.innerHTML = strSubInnerHTML;
div_grid.style.cssText = "margin:auto;width:"+totalWidth+"px;height:"+itemHeight+"px;position:relative;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;float:left;text-align:center;";
my_div.appendChild(div_grid);
return div_grid;
}
</script>
</head>
<body>
<div id="my_div" style="width: 750px; margin-top: 10px; text-align: left; overflow: hidden;">
</div>
<script type="text/javascript">
var totalWidth = 480;
var itemHeight = 16;
var titleWidth = 80;
var itemText = new Array("1111111","2222222","3333333","4444443","5555555","6655555");
CreateGrid(itemHeight, totalWidth, 6, "#D4E8FE", "#000000", itemText);
</script>
</body>
</html>
这个脚本在火狐上显示一切ok，但是在IE上显示最后一个div总是没有跟它后面的div对其，右边有一点空白不知道怎么解决？
------解决方案--------------------
这是盒子模型的问题，lz可以看看我的帖子：【分享】重新认识IE盒模型bug
在你的代码里，几个div模仿单元格，宽度在Firefox里计算的没问题，每个DIV都占 80px的宽度。79px(width)+1px(border-right)=80px;
但是在IE里，宽度包含了border，所以，最后，每个div占的宽度都是79px，6个div比Firefox里就少占了6px的宽度，所以有空白了。
让页面运行在标准模式下就可以了。
给它加一个DOCTYPE：<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CreateGrid(itemHeight, totalWidth, itemNum, bgColor, borderColor, itemText)
{
var div_grid = 0;
var div_subitem = 0;
var strSubInnerHTML = "";
var itemWidth = totalWidth/itemNum-1; //减1是因为要设置右边框
div_grid = document.createElement("div");
for(var i = 0; i < itemNum; i++)
{
if(itemText != null)
{
strSubInnerHTML += "<td style='border:1px solid #0066FF'><div style='width:"+itemWidth+"px;height:"+itemHeight+";margin:auto;position:relative;background-color:"+bgColor+";border-right:solid 1px "+borderColor+";float:left;'>"+itemText[i]+"</div></td>";
}
}
div_grid.innerHTML = strSubInnerHTML;
div_grid.style.cssText = "margin:auto;width:"+totalWidth+"px;height:"+itemHeight+"px;position:relative;border-top:solid 1px;border-bottom:solid 1px;border-right:solid 1px;float:left;text-align:center;";
my_div.appendChild(div_grid);
return div_grid;
}
</script>
</head>
<body>
<div id="my_div" style="width: 750px; margin-top: 10px; text-align: left; overflow: hidden;">
</div>
<script type="text/javascript">
var totalWidth = 480;
var itemHeight = 16;
var titleWidth = 80;
var itemText = new Array("1111111","2222222","3333333","4444443","5555555","6655555");
CreateGrid(itemHeight, totalWidth, 6, "#D4E8FE", "#000000", itemText);
</script>
</body>
</html>
这个脚本在火狐上显示一切ok，但是在IE上显示最后一个div总是没有跟它后面的div对其，右边有一点空白不知道怎么解决？
------解决方案--------------------
这是盒子模型的问题，lz可以看看我的帖子：【分享】重新认识IE盒模型bug
在你的代码里，几个div模仿单元格，宽度在Firefox里计算的没问题，每个DIV都占 80px的宽度。79px(width)+1px(border-right)=80px;
但是在IE里，宽度包含了border，所以，最后，每个div占的宽度都是79px，6个div比Firefox里就少占了6px的宽度，所以有空白了。
让页面运行在标准模式下就可以了。
给它加一个DOCTYPE：<!DOCTYPE html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
