滑动门,在IE下能够正常显示,可在FIREFOX下就乱的,高手解救

xsm 2008-02-24 11:17:31
最近用DIV+CSS做了一个滑动门,在IE下能够正常显示,可在FIREFOX下就乱的,我是在<DIV>中用JSP生成表格来显示数据,请问高手怎么解决.
</div>
<div><TABLE><TR><TD></TD></TR></TABLE></div>
<div>内容三</div>
<div>内容四</div>
<div>内容五</div>
</div>
...全文
184 点赞 收藏 7
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
UltraBejing 2008-05-01
什么呀
回复
ycmuma 2008-02-27
路过拿分
回复
xcs5180088 2008-02-27
给你一个纯静态的滑动门,你用JSP来做只需把字段绑定,内容里面设置好显示样式。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
/* 2列 */
.divArea{margin:0; width:300px;background:#000000;}
.divArea .Col2{ width:300px;}
/* 右边选项卡 */
.n4Tab{clear:both;border-bottom:1px #red solid;}
.n4Tab .TabTitle{}
.n4Tab .TabTitle ul{margin:0; padding:0;}
.n4Tab .TabTitle li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;}
.n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;}
.n4Tab .TabTitle .normal{background:url("http://www.52vision.cn/attachments/month_0703/select//admenu_bg2.gif");}
.n4Tab .TabTitle .active{background:url("http://www.52vision.cn/attachments/month_0703/select//admenu_bg1.gif");}
.n4Tab .TabContent {padding:0px;}
.none {display:none;}
a {font-size: 12px;color: #000000;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;color: #000000;}
a:hover {text-decoration: underline;color: #FF0000;}
a:active {text-decoration: none;color: #000000;}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>

</head>

<body>
<div class="divArea">
<!-- right -->
<div class="Col2">
<!-- 分类信息开始 -->
<div class="n4Tab" id="n4Tab" style="height:40px;">
<div class="TabTitle">
<ul>
<li id="n4Tab_Title0" onmouseover="nTabs('n4Tab',this);" class="active"><h6><a href="http://www.sohu.com">资讯</a></h6></li>
<li id="n4Tab_Title1" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="http://www.sohu.com">教育</a></h6></li>
<li id="n4Tab_Title2" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">房产</a></h6></li>
<li id="n4Tab_Title3" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">家具</a></h6></li>
<li id="n4Tab_Title4" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">汽车</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div id="n4Tab_Content0">资讯资讯 </div>
<div id="n4Tab_Content1" class="none">教育教育 </div>
<div id="n4Tab_Content2" class="none">房产房产</div>
<div id="n4Tab_Content3" class="none" style="width:60px; height:200px;overflow:auto; text-align:left;scrollbar-base-color:red;"><img src="jcsjtil.jpg" /></div>
<div id="n4Tab_Content4" class="none">汽车汽车</div>
</div>
</div>
<!-- 分类信息结束 -->
</div>
</div>
</body>
</html>
回复
myvicy 2008-02-26
你先通过测试看看是脚本题还是css不兼容的问题.
显示错位听你的描述似乎是你的css未很好的兼容的问题.
先通过测试确定问题在那里吧.
回复
pears2017ms 2008-02-25
jsp的代码看起就是不舒服 呵呵 友情up1
回复
xsm 2008-02-24
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MENU</title>
<style type="text/css">
div#CMenu {
/*主菜单底部*/
width:500px;
border:#CCCCCC 1px solid;
}
div#CMenu h4 {
/*标题*/
width:20%;
float:left;
margin:0px;
text-align:center;
font-size:12px;
font-weight:normal;
line-height:24px;
background-color:#F4F4F4;
border-bottom:#CCCCCC 1px solid;
cursor:default;
}

div#CMenu h4.Default {
/*标题选中后标题*/
background-color:#E0E0E0!important;
}

div#CMenu div.Default {
/*标题选中后内容*/
display:block!important;
}

div#CMenu div {
/*设置所有内容的样式*/
line-height:20px;
display:none;
background-color:#FAFAFA;
font-size:12px;
padding:0px 10px 0px 10px;
}
</style>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
var html;

if (bool) {

html = window.HTMLElement.prototype;

window.attachEvent = document.attachEvent = html.attachEvent = function (property, func, bool) {
//兼容attachEvent方法
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);

};

html.__defineSetter__("className", function (t_val) {
//兼容className属性(高版本FF已经兼容了)
return this.setAttribute("class") = t_val;

});

html.__defineGetter__("className", function () {
//兼容className属性(高版本FF已经兼容了)
return this.getAttribute("class");

});

}

})(/Firefox/.test(window.navigator.userAgent));

var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};

var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};

var $ = function (id) {
//获取对象
return document.getElementById(id);
};

Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};

var CMenu = Class.create();

CMenu.prototype = {

initialize : function (time) {
//初始化参数
var wc = this;
wc.time = time; //初始化滑动延迟时间
wc.timer = 0; //初始化记时器存储变量
wc.old = { tit : null, con : null }; //初始化当前目标成员
wc.style = ""; //默认样式
},

change : function (object) {
//设置样式
var wc = this, old = wc.old, style = wc.style;
if (object.tit == old.tit) return;
if (old.tit) old.tit.className = old.con.className = "";
(old.tit = object.tit).className = (old.con = object.con).className = style;
wc.timer = 0;
},

over : function (obj, bool) {
//显示控制
var wc = this;

if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除

if (bool) wc.timer = window.setTimeout(wc.change.bind(wc, obj), wc.time);
else wc.change(obj);
},

out : function (obj) {
//鼠标移开函数
var wc = this;
if (wc.timer) {
window.clearTimeout(wc.timer);
wc.timer = 0;
}
},

add : function (obj) {
//添加成员
var wc = this;
obj.tit.attachEvent("onclick", wc.over.bind(wc, obj, 0));
obj.tit.attachEvent("onmouseover", wc.over.bind(wc, obj, 1));
obj.tit.attachEvent("onmouseout", wc.out.bind(wc, obj));
},

parse : function (div, style) {
//解释对象
var wc = this, tits = div.getElementsByTagName("h4"), cons = div.getElementsByTagName("div"), i;
try {
wc.style = style;
wc.change({ tit : tits[0], con : cons[0] }, style);
for (i = 0 ; i < tits.length ; i ++)
wc.add({ tit : tits[i], con : cons[i] }, style);
} catch (exp) {}
}

};

window.onload = function () {
var wc = new CMenu(250);
wc.parse(document.getElementById("CMenu"), "Default");
wc = null;
};
</script>
</head>

<body>
<div id="CMenu">
<h4>第一栏</h4>
<h4>第二栏</h4>
<h4>第三栏</h4>
<h4>第四栏</h4>
<h4>第五栏</h4>
<div runtimeStyle>
</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
<div>内容五</div>
</div>
</body>
</html>


我不用JSP生成也是这样的,总之在<DIV>中用<TABLE>就是会显示错位
回复
兔子党-连长 2008-02-24
这个多半是你脚本或者css写的有问题:
贴这个有什么用呢?
回复
相关推荐
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2008-02-24 11:17
社区公告
暂无公告