一个关于css兼容的问题 - 编程论坛

#2

gupiao1752010-08-31 16:54

CSS的问题，不是一两句话就能说清楚的，不过文件头最好都加上：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.
这个，按照CSS约束规范来写！网页显示不正确，那因该是浏览器兼容问题，你把代码在FF在测试，然后在写CSSHACK去兼容IE6。7。8。如果你对CSS又不是很熟悉的话，那这个工程可是个大块头，不是一个问题就能表达完整的。

#3

yms1232010-08-31 18:41

可以用javascript来补救不需要改CSS
javascript的居中算法的代码
function alertCenter()
{
  //其中alterLayer是要居中的div的id
   var cWidth=document.documentElement.clientWidth;
   var cHeight=document.documentElement.clientHeight;
   var acHeight=alertLayer.clientHeight;
   var acWidth=alertLayer.clientWidth;
   var sLeft=document.documentElement.scrollLeft;
   var sTop=document.documentElement.scrollTop;
   alertLayer.style.left=(cWidth-acWidth)/2+sLeft+"px";
   alertLayer.style.top=(cHeight- acHeight)/2+sTop-50+"px";
}

#4

itit4562010-09-01 15:48

回复 3楼 yms123

那么这个js怎么调用呢!

#5

yms1232010-09-01 18:43

function alertCenter()
{
  //其中alterLayer是要居中的div的id
   var cWidth=document.documentElement.clientWidth;
   var cHeight=document.documentElement.clientHeight;
   var acHeight=alertLayer.clientHeight;
   var acWidth=alertLayer.clientWidth;
   var sLeft=document.documentElement.scrollLeft;
   var sTop=document.documentElement.scrollTop;
   alertLayer.style.left=(cWidth-acWidth)/2+sLeft+"px";
   alertLayer.style.top=(cHeight- acHeight)/2+sTop-50+"px";
}
直接在<body onLoad里写就可以
比如
<body onLoad="alertCenter();">
就是这样。

#6

madpbpl2010-09-01 18:50

个人认为还是加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
这句比较好，这样符合w3c标准，兼容问题主要还是css样式的问题
对于ie主要是调试ie6和ie7，加上以下这句
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />或是
<meta http-equiv="x-ua-compatible" content="ie=7" />
如果在ie7下是正常的，ie8下肯定是正常的。实在不行，搜索一下css hack，不过这种方式不建议，尽量少用css hack比较好。

#7

itit4562010-09-02 19:10

哥哥,不行呀,还是不行!

<script>
function alertCenter()
{
  //其中alterLayer是要居中的div的id
   var cWidth=document.documentElement.clientWidth;
   var cHeight=document.documentElement.clientHeight;
   var acHeight=alertLayer.clientHeight;
   var acWidth=alertLayer.clientWidth;
   var sLeft=document.documentElement.scrollLeft;
   var sTop=document.documentElement.scrollTop;
   alertLayer.style.left=(cWidth-acWidth)/2+sLeft+"px";
   alertLayer.style.top=(cHeight- acHeight)/2+sTop-50+"px";
}
</script>
<body onLoad="alertCenter();">
<div id="alertLayer">
<a href="pic/201082792763.jpg" rel="lightbox" ><img src="pic/201082792763.jpg" width="134" height="97" style="border:1 solid #ffffff" ></a>

</div>