4
我在谷歌瀏覽器和Safari上運行我的應用程序，這兩個webkit兼容。我正在構建一個使用-webkit轉換的滾動div。-webkit-transition適用於HTML4過渡，但不適用於HTML5？
當我將doctype指定爲HTML 4過渡（！DOCTYPE HTML PUBLIC「 - // W3C // DTD HTML 4.0 Transitional // EN」）時，它工作得很好，但我們的要求是HTML 5.當我設置doctype（！DOCTYPE HTML）轉換完全停止工作。
我通過HTML5驗證程序運行我的代碼並清除了所有錯誤（標記除外）。
我誤會了什麼嗎？
下面是相關代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<style>
ul{margin:0;padding:0;}
li{display: inline; float: left;}
body{
background-color: #475c76;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
}
#wrapper{
height: 600px;
width: 800px;
}
/* Main menu */
#mainMenu{
height: 83px;
background-image: url(img/mainMenu_bg.png);
}
#mainMenu li{
height: 57px;
margin: 13px 0;
display: inline;
float: left;
color: #475c76;
}
#mainMenu li a{
color: #475c76;
padding: 0;
text-decoration: none;
background-image: url(img/btn_main.png);
background-position:0 0;
height: 57px;
width: 197px;
text-align: center;
line-height: 40pt;
display: inline-block;
}
#mainMenu li a:link{
}
#mainMenu li a:active{
background-position: 0 -57px;
color: white;
}
/* Page body */
#pagebody{
overflow: hidden;
height: 417px;
background-color: #DDDDDD;
}
/* Submenu */
.subMenuWrapper{
height: 80px;
width: 800px;
overflow: hidden;
position: absolute;
top: 421px;
left: 0;
}
#subMenus{
position: absolute;
background-image: url(img/subMenu_bg.png);
height: 80px;
width: 1600px;
-webkit-transition: all .4s;
}
#subMenus ul{
width: 780px;
padding: 0 10px;
display: inline;
float: left;
}
#subMenus ul .floatright{
float: right;
}
/* Buttons */
a.button{
color: white;
text-decoration: none;
background-position:center 0;
text-align: center;
display: inline-block;
}
a.button>*{
display: inline-block;
margin-top: 10px;
height: 60px;
background-image: url(img/button1.png);
line-height: 40pt;
}
a.button .l{
width: 14px;
background-position:top left;
}
a.button .t{
background-position:top center;
color: #AABBCC;
padding: 0 10px;
}
a.button .r{
width: 14px;
background-position: top right;
}
a.button .larrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position:top left;
}
a.button .rarrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position: top right;
}
a:active.button .t{
background-position: center -60px;
color: white;
}
a:active.button .l,
a:active.button .larrow{
background-position: left -60px;
}
a:active.button .r,
a:active.button .rarrow{
background-position: right -60px;
}
/* List */
#scrollingWrapper{
overflow: hidden;
}
#scrollingWrapper>div{
display:inline;
float:left;
}
#scrollingList{
position: relative;
width: 660px;
-webkit-transition: all .5s;
}
.lineItem{
height: 60px;
width: 100%;
border-top: 3px solid white;
border-bottom: 3px solid gray;
font-size: 24pt;
padding: 3px 8px;
background-color: #E8E8E8;
}
.lineItem *{
height: 57px;
display: inline;
float: left;
}
.lineItem .text{
margin: 7px 14px;
}
.lineItem .checkbox{
background-image: url(img/btn_check.png);
width: 44px;
margin:0;
}
/* Scroll buttons */
.scrollArea .scrollBar{
display: inline;
float: left;
background-color: #D0D0D0;
height: 334px;
width: 5px;
margin: 2px 0 2px 28px;
padding: 0;
border-radius: 3px;
}
.scrollArea .scrollBar #elevator{
position: relative;
background-color: gray;
height: 100px;
width: 5px;
-webkit-transition: all .5s;
border-radius: 3px;
}
.scrollArea .scrollButtons{
display:inline;
float:left;
margin-left: 12px;
margin-top: 100px;
}
.scrollArea .scrollButtons li{
display: block;
float: none;
padding: 4px 0;
}
.scrollArea .scrollButtons li div{
margin:0;
display: inline;
float: left;
}
.scrollArea .scrollButtons li div img{
padding-top: 10px;
}
/* Footer */
#footer{
position: absolute;
top: 500px;
height: 100px;
width: 800px;
border-top: 3px solid black;
}
#footer img{
margin: 5px;
float:left;
}
#footer #datetime{
margin-top: 20px;
}
#footer #datetime *{
float: right;
color: #AABBCC;
text-align: center;
color: #AABBCC;
display: block;
width: 160px;
}
</style>
<script>
var arrList = ["Milk 1%", "Bread", "Granny Smith Apples", "Oatmeal","Potatoes", "Yogurt", "Muffins", "Spaghetti", "Crackers", "Pancake Mix", "Melons", "Ice Cream", "Perogies", "Cottage Cheese", "Canned Peaches","Red Delicious Apples", "Ground Beef", "Salmon Steaks", "Popcorn", "Salt", "Tea", "Coffee", "Light Bulbs", "Eggs", "Bacon"];
var lineHeight = 72;
var windowHeight = 338;
var scrollBarHeight = 335;
var scrollAmt = lineHeight*4;
var listHeight; //tbd
var elevHeight; //tbd
function init(){
popList();
// upon finished loading
listHeight = (arrList.length)*lineHeight;
document.getElementById('scrollingList').style.top = 0;//needs to be explictly set so that it can be read later, otherwise it is undefined
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;
document.getElementById('elevator').style.top = 0;
}
function popList(){
// populate list from arrList
// THIS CODE IS RUN INLINE
var listHTML = "";
for (item=0;item<arrList.length;item++){
listHTML += '<div id="lineitem'+ item +'" class="lineItem" checked="false">';
listHTML += ' <a href="javascript:void(false);" id="check'+ item +'" class="checkbox" onmousedown="check(this, true)" onmouseup="check(this, false)"></a>';
listHTML += ' <div class="text">' + arrList[item] + '</div>';
listHTML += '</div>';
}
document.getElementById('scrollingList').innerHTML = listHTML;
}
function scrollme(dir){
var yMax = windowHeight-listHeight;
var yMin = 0;
if (dir>0){ // scroll down (list physically moves up, listPos goes more negative)
_setlistPos(Math.max(_getlistPos() - scrollAmt, yMax));
}
else{ // scroll up (list physically moves down, listPos goes more positive)
_setlistPos(Math.min(_getlistPos() + scrollAmt, yMin));
}
_setscrollPos();
function _getlistPos(){ return parseInt(document.getElementById('scrollingList').style.top); }
function _setlistPos(y){ document.getElementById('scrollingList').style.top = y; }
function _setscrollPos(){ document.getElementById('elevator').style.top = -(_getlistPos())*scrollBarHeight/listHeight; }
}
function editList(editState){
if (editState){ // show 2ndary menu
document.getElementById('subMenus').style.left = -800;
}
else{ // return to primary menu
document.getElementById('subMenus').style.left = 0;
}
}
function check(button,clickState){
var lineitem = button.parentNode;
if(clickState){ // button pressed
button.style.backgroundPosition = "0 -57px";
}
else{ // button released
if (lineitem.getAttribute("checked")=="false"){ // box was unchecked, so check it
lineitem.setAttribute("checked","true");
button.style.backgroundPosition = "0 -114px";
}
else{ // box was checked, so uncheck it
lineitem.setAttribute("checked","false");
button.style.backgroundPosition = "0 0";
}
}
}
function deleteChecked(){
var tempArrList = [];
for (item=0;item<arrList.length;item++){
var lineitem = document.getElementById("lineitem" + item);
if (lineitem.getAttribute("checked")!="true"){
tempArrList.push(lineitem.childNodes[3].innerText);
}
}
arrList = tempArrList;
init();
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onload="init()">
<div id="wrapper">
<!-- Main Menu -->
<ul id="mainMenu">
<li><a href="">Home</a></li>
<li><a href="">Shopping List</a></li>
<li><a href="">Recipes</a></li>
<li><a href="">Specials</a></li>
</ul>
<!-- Page body -->
<div id="pagebody">
<div id="scrollingWrapper">
<!-- Scroll list -->
<div id="scrollingList">
</div>
<!-- Scroll Controls -->
<div class="scrollArea">
<div class="scrollBar"><div id="elevator"></div></div>
<ul class="scrollButtons">
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(-1);">
<div class="l"> </div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(1);">
<div class="l"> </div><div class="t"><img src="img/glyph_dn.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
<!-- SubMenus -->
<div class="subMenuWrapper">
<div id="subMenus">
<ul id="subMenu1">
<li>
<a class="button" href="javascript:void(false);">
<div class="l"> </div><div class="t">Button 1</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="editList(true);">
<div class="l"> </div><div class="t">Edit List</div><div class="rarrow"> </div>
</a>
</li>
</ul>
<ul id="subMenu2" class="subMenu">
<li>
<a class="button" href="javascript:void(false);" onmouseup="editList(false);">
<div class="larrow"> </div><div class="t">Done</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="deleteChecked()">
<div class="l"> </div><div class="t">Clear Checked</div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<img src="img/main_ad_wave.png" alt="">
<div id="datetime">
<span id="date">Fri. Jan. 01</span>
<span id="time">12:01am</span>
</div>
</div>
</div>
</body>
</html>
我需要看到整個頁面，A S您提供什麼行不通。還有，你只是嘗試過渡：所有.5s緩和; ？ – 2011-01-19 18:06:48