作者keiesa (kei)
看板Ajax
标题[请益] 急问！用IE开启有Accordion效果的网页뜠…
时间Mon Oct 22 09:16:10 2007
※ [本文转录自 Web_Design 看板]
作者: keiesa (kei) 看板: Web_Design
标题: [请益] 急问！用IE开启有Accordion效果的网页会烂掉.....
时间: Sun Oct 21 21:05:13 2007
不知道可不可以在这里问这个问题，如果不妥请告诉我该去哪个板问，谢谢！
昨天被这个网站
http://www.stickmanlabs.com/accordion/ 的效果吸引，
所以尝试把它的原始档抓下来做学校的网页，
一直都用firefox预览，没想到都弄好了以後用IE6开居然烂掉了.....
我把它上传到这里：
http://kei.000webhost.org/2007musicology/index.html
(有点慢，所以我把语法也附在底下)
用firefox都OK，用IE问题有：
1.几乎每一个"accordion_toggle"开启後上下会出现黑色的边
2.「发表论文」的"vertical_accordion_toggle" 开不了
3.「主办单位」的"vertical_accordion_toggle" 整个变黑色的
因为是新手，所以只敢替换它的文字还有改变编码为BIG5，
实在不知道为什麽会坏掉.....
拜托板上各位高手帮我看一下，感激不尽(拜)，谢谢！
以下是我的语法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head
profile="
http://gmpg.org/xfn/11"><title>2007台湾音乐学论坛</title><!-- Meta
Tags -->
<meta http-equiv="content-type" content="text/html; charset=big5">
<meta name="keywords" content="accordion, javascript accordion,
scriptaculous">
<meta name="description" content="The ultimate modal window system,
LightWindow, allows you to build your own theem, create mixed media galleries
including flash, quictkime and images. Through a variety of parameters this
system can do it all and recreate any other system out there!">
<meta name="robots" content="index, follow"><!-- JavaScript -->
<script type="text/javascript" src="combine.php"></script><!-- CSS -->
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
function loadAccordions() {
var topAccordion = new accordion('horizontal_container', {
classNames : {
toggle : 'horizontal_accordion_toggle',
toggleActive : 'horizontal_accordion_toggle_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 525
},
direction : 'horizontal'
});
var bottomAccordion = new accordion('vertical_container');
var nestedVerticalAccordion = new accordion('vertical_nested_container', {
classNames : {
toggle : 'vertical_accordion_toggle',
toggleActive : 'vertical_accordion_toggle_active',
content : 'vertical_accordion_content'
}
});
// Open first one
bottomAccordion.activate($$('
#vertical_container .accordion_toggle')[0]);
// Open second one
topAccordion.activate($$('
#horizontal_container
.horizontal_accordion_toggle')[2]);
}
</script><!-- CSS -->
<style type="text/css">
/*
Vertical Accordions
*/
.accordion_toggle {
display: block;
height: 30px;
width: 680px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right
#e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
.vertical_accordion_toggle {
display: block;
height: 30px;
width: 600px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.vertical_accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right
#e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.vertical_accordion_content {
background-color: #ffffff;
color: #444444;
overflow: hidden;
}
.vertical_accordion_content h2 {
margin: 15px 0 5px 10px;
color: #0099FF;
}
.vertical_accordion_content p {
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/*
Horizontal Accordion
*/
.horizontal_accordion_toggle {
/* REQUIRED */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
display: block;
height: 100px;
width: 30px;
background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.horizontal_accordion_toggle_active {
background: url(images/h_accordion_toggle_active.jpg) no-repeat top left
#e0542f;
border-right: 1px solid #f68263;
}
.horizontal_accordion_content {
/* REQUIRED */
height: 100px; /* We need to define a height for the accordion as it
stretches the width */
float: left; /* This make sure it stays horizontal */
/* REQUIRED */
overflow: hidden;
background-color: #ffffff;
color: #444444;
}
.horizontal_accordion_content p {
width: 450px;
line-height: 150%;
padding: 5px 10px 15px 10px;
}
/* Container styling*/
#horizontal_container {
margin: 20px auto 20px auto;
width: 680px;
height: 100px;
}
#vertical_nested_container {
margin: 20px auto 20px auto;
width: 620px;
}
</style></head><body>
<div id="container">
<h1><span>2007台湾音乐学论坛</span> </h1>
<p class="description"></p>
<div id="vertical_container">
<h1 class="accordion_toggle accordion_toggle_active">活动资讯</h1>
<div style="height: auto; display: block;" class="accordion_content">
<br/>
<p> 时间：2007年12月14日至15日<br/><br/>
地点：国立台北艺术大学 国际会议厅</p>
<br/>
</div>
<h1 class="accordion_toggle">报名资讯</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<p>
<br/>
采网路报名方式，即日起开放报名，限额200名。<br/><br/>
请先<a href="../2007twmusicology/2007reg.xls">下载报名表</a>，填完
後再寄至<a href="mailto:
[email protected]">我们的信箱</a>。
</p>
<div id="vertical_nested_container">
<h3 class="vertical_accordion_toggle">认证时数</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
将於12月初公告。
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">发表论文</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div id="vertical_nested_container">
<h3 class="vertical_accordion_toggle">学术组</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
2007台湾音乐学论坛学术委员会委员：<br/>
黄均人(召集人)、曾翰霈、温秋菊、蔡宗德、王惠民、杨建章、蔡灿煌</p>
</div>
<h3 class="vertical_accordion_toggle">论文审查通过名单</h3>
<div style="height: 0px; display: none; "
class="vertical_accordion_content">
<p>
致发表人:<br/>
台湾音乐学论坛今年已经是第三次举办，前两年届是以邀稿的方式徵求论文，本届则增加
了公开徵求论文并进行审查的方式。本次公开徵选总共收到19篇投稿论文，经学术委员会
七位委员们审查论文摘要，并以无记名投票，选出七篇单篇论文与一篇专题讨论小组论文
，获选之论文题目与投稿人姓名如下：<br/><br/>
<table width="420px" border="1" align="center">
<th colspan="2" align="center" valign="middle" style="border-top-width:
center; text-align: center; ">审查通过单篇论文 (依票数高低排列)</th>
<tr>
<td width="300px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">论文题目</td>
<td width="50px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">投稿人</td>
</tr>
<tr>
<td>由双镜效应论台湾当代音乐</td>
<td>林帼贞</td>
</tr>
<tr>
<td>论武满彻的音乐自然观---以ARC为例</td>
<td>杨舒婷</td>
</tr>
<tr>
<td>台湾当代音乐创作中的「道白歌」现象初探</td>
<td>车炎江</td>
</tr>
<tr>
<td>从日治时期台湾音乐会史料再探西洋音乐在台发展论述</td>
<td>林姿呈</td>
</tr>
<tr>
<td>The Filipino Catholic Choir Soundscape in Taipei</td>
<td>黄佩玲</td>
</tr>
<tr>
<td>依里亚德的理论探究歌剧Peter Grimes 的圣俗二元性</td>
<td>陈威仰</td>
</tr>
<tr>
<td>男性学者凝视下的女性音乐家-<br/>法兰契斯卡‧卡契尼晚期史料与诠释间的张力
</td>
<td>许芳瑜</td>
</tr>
</table>
<br/><br/>
<table width="420px" border="1" align="center">
<th colspan="2" align="center" valign="middle" style="border-top-width:
center; text-align: center; ">审查通过专题讨论小组论文</th>
<tr>
<td width="300px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">论文题目</td>
<td width="180px" height="180%" align="center" valign="middle" style="margin:
center; text-align: center; ">投稿人</td>
</tr>
<tr>
<td>After New Musicology: <br/>二十一世纪的音乐学研究新视野</td>
<td>陈人彦、张雅婷、<br/>高雅俐、杨建章</td>
</tr>
</table>
<br/><br/>
</p>
</div>
<h3 class="vertical_accordion_toggle">议程表</h3>
<div style="height: 0px; display: none;"
class="vertical_accordion_content">
<p>
将於11月中公告。
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">交通资讯</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div id="horizontal_container">
<h4 class="horizontal_accordion_toggle">地<br/>理<br/>位<br/>
置</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a target="_blank" title="连结至Google地图"
href="
http://maps.google.com/maps?f=d&hl=zh-TW&geocode=8447105497421462392,25.131454,121.468964&saddr=&daddr=25.131648,121.469007&mrcr=0&mrsp=1&sz=16&mra=dme&sll=25.132328,121.469929&sspn=0.008373,0.014462&ie=UTF8&om=1&ll=25.132328,121.469929&spn=0.008373,0.014462&source=embed">
北艺大地理位置</a><br/>
</p>
</div>
<h4 class="horizontal_accordion_toggle" >学<br/>校<br/>地<br/>
图</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a href="
http://www2.tnua.edu.tw/tnua/link/map/map.html" target="_blank"
title="连结至校园鸟瞰图">北艺大地图</a> （国际会议厅位於研究大楼二楼）
<br/>
</p>
</div>
<h4 class="horizontal_accordion_toggle
horizontal_accordion_toggle_active">乘<br/>车<br/>资<br/>讯</h4>
<div style="width: 525px; display: block; height: auto;"
class="horizontal_accordion_content">
<p>
可至捷运淡水线关渡站转乘校车<br/><br/>
<a href="
http://musikwissenschaft.googlepages.com/bus.doc">校车与红35发
车时刻表</a><br/>
<a href="
http://musikwissenschaft.googlepages.com/961sat.doc">周六
校车时刻表</a>
</p>
</div>
<h4 class="horizontal_accordion_toggle">查<br/>询</h4>
<div style="width: 0px; display: none;"
class="horizontal_accordion_content">
<p>
<a href="
http://www.trtc.com.tw/">台北大众捷运首页</a><br/>
<a href="
http://www.taipeibus.taipei.gov.tw/">台北市公车路线
查询</a>
</p>
</div>
</div>
</div>
<h1 class="accordion_toggle">主办单位</h1>
<div style="height: 0px; display: none;" class="accordion_content">
<div align="center" style="width:70%; float: left;" >
<p> <br/>主办单位 国立台北艺术大学音乐学研究所 台湾音
乐学论坛筹备小组<br/>
电话：(02)2896-1000 #5040<br/>
电子信箱：<a
href="mailto:
[email protected]">
[email protected]</a></p>
<p>协办单位 国家科学委员会人文研究中心</p>
</div>
<div align="center" style="width: 30%; float: right;" >
<p><br/>历年台湾音乐学论坛网站<br/>
<a target="_blank"
href="
http://homepage.ntu.edu.tw/~gim/2005forum/index.html">2005台湾音乐学论坛
</a><br/>
<a target="_blank" href="
http://www.music.nsysu.edu.tw/2006/2006.html">2006台
湾音乐学论坛</a><br/><br/>
相关连结<br/>
<a target="_blank" href="
http://groups.yahoo.com/group/TaiwanMusicology/">台湾
音乐学讨论区</a><br/>
</p>
</div>
</div>
<div class="page-footer">
</div>
</div>
</div>
<script type="text/javascript">
//
// You can hide the accordions on page load like this, it maintains
accessibility
//
// Special thanks go out to Will Shaver @
http://primedigit.com/
//
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
$(accordion.next(0)).setStyle({
height: '0px'
});
});
</script>
<script type="text/javascript" src="urchin.js"></script>
<script type="text/javascript">_uacct =
"UA-624845-2";urchinTracker();</script>
</body></html>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 219.84.5.143
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 219.84.5.143
1F：→ keiesa:一和三解决了，第二个问题麻烦板上高手帮帮我，谢谢！선 10/23 09:54
2F：→ keiesa:自己用奇怪的方式解决了....."vertical_nested_accordion" 10/23 14:48
3F：→ keiesa:只有最上层的才有效("horizontal_container"却不受限??) 10/23 14:50
4F：→ keiesa:所以我把"vertical_nested_accordion"里所有名称都加上"2" 10/23 14:54
5F：→ keiesa:就OK了...知其然不知其所以然地解决了，不好意思占用板面了 10/23 14:56