-webkit过渡在HTML4过渡版中正常工作，但在HTML5中不正常？
我在谷歌Chrome和Safari上运行我的应用程序，这两款浏览器都符合webkit标准。我正在使用-webkit转换构建一个滚动div 当我将doctype指定为HTML4 transitional（！doctype HTML PUBLIC“-//W3C//DTD HTML4.0 transitional//EN）时，它工作得很好，但我们的要求是HTML5。当我设置doctype（！doctype HTML）时，转换将完全停止工作 我通过HTML5验证程序运行代码，并清除了所有错误（标签除外） 我是不是误解了什么 以下是相关代码：-webkit过渡在HTML4过渡版中正常工作，但在HTML5中不正常？,html,webkit,css,Html,Webkit,Css,我在谷歌Chrome和Safari上运行我的应用程序，这两款浏览器都符合webkit标准。我正在使用-webkit转换构建一个滚动div 当我将doctype指定为HTML4 transitional（！doctype HTML PUBLIC“-//W3C//DTD HTML4.0 transitional//EN）时，它工作得很好，但我们的要求是HTML5。当我设置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>
购物清单
ul{margin:0；padding:0；}
li{display:inline；float:left；}
身体{
背景色：#475c76；
字体系列：Arial；
字号：18pt；
字体大小：粗体；
}
#包装纸{
高度：600px；
宽度：800px；
}
/*主菜单*/
#主菜单{
高度：83px；
背景图片：url（img/main menu_bg.png）；
}
#主菜单李{
高度：57px；
边际：13px0；
显示：内联；
浮动：左；
颜色：#475c76；
}
#主菜单李a{
颜色：#475c76；
填充：0；
文字装饰：无；
背景图片：url（img/btn_main.png）；
背景位置：0；
高度：57px；
宽度：197px；
文本对齐：居中；
线路高度：40磅；
显示：内联块；
}
#主菜单：链接{
}
#主菜单LIA：活动{
背景位置：0-57px；
颜色：白色；
}
/*页面正文*/
#页体{
溢出：隐藏；
高度：417px；
背景色：#DDDDDD；
}
/*子菜单*/
.子月饼包装{
高度：80px；
宽度：800px；
溢出：隐藏；
位置：绝对位置；
顶部：421px；
左：0；
}
#子菜单{
位置：绝对位置；
背景图片：url（img/子菜单_bg.png）；
高度：80px；
宽度：1600px；
-webkit转换：all.4s；
}
#子菜单{
宽度：780px；
填充：0 10px；
显示：内联；
浮动：左；
}
#子菜单ul.右侧{
浮动：对；
}
/*按钮*/
a、 钮扣{
颜色：白色；
文字装饰：无；
背景位置：中心0；
文本对齐：居中；
显示：内联块；
}
a、 按钮>*{
显示：内联块；
边缘顶部：10px；
高度：60px；
背景图片：url（img/button1.png）；
线路高度：40磅；
}
a、 巴顿{
宽度：14px；
背景位置：左上角；
}
a、 按钮{
背景位置：上中；
颜色：#AABBCC；
填充：0 10px；
}
a、 按钮{
宽度：14px；
背景位置：右上角；
}
a、 按钮，拉罗{
宽度：24px；
背景图片：url（img/buttonpointes.png）；
背景位置：左上角；
}
a、 巴顿，拉罗{
宽度：24px；
背景图片：url（img/buttonpointes.png）；
背景位置：右上角；
}
a:active.button.t{
背景位置：中心-60px；
颜色：白色；
}
a:active.button.l，
a:活动。按钮。拉罗{
背景位置：左-60px；
}
a:active.button.r，
a:active.button.rarrow{
背景位置：右-60px；
}
/*名单*/
#滚动包装器{
溢出：隐藏；
}
#scrollingWrapper>div{
显示：内联；
浮动：左；
}
#滚动列表{
位置：相对位置；
宽度：660px；
-webkit过渡：全部5秒；
}
.行项目{
高度：60px；
宽度：100%；
边框顶部：3件纯白；
边框底部：3倍纯色灰色；
字号：24pt；
填充：3px8px；
背景色：#E8E8E8；
}
.行项目*{
高度：57px；
显示：内联；
浮动：左；
}
.lineItem.text{
利润率：7px 14px；
}
.lineItem.checkbox{
背景图片：url（img/btn_check.png）；
宽度：44px；
保证金：0；
}
/*滚动按钮*/
.scrollArea.scrollBar{
显示：内联；
浮动：左；
背景色：#D0；
高度：334px；
宽度：5px；
保证金：2px0 2px28px；
填充：0；
边界半径：3px；
}
.scrollArea.scrollBar
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;