4
Google ChromeとSafariの両方で、Webkitに準拠したアプリケーションを実行しています。私は、-webkit-transitionを使ってスクロールする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>
私はあなたが動作しませんを提供しているものだ、ページ全体を見る必要があると思います。また、ちょうどトランジションを試してみました：すべての.5sイージー・イン・アウト; ？ –
これに返信する方法がわからないので、コメント（600文字未満）を追加していません...代わりに元の投稿を編集してコード全体を含めるようにしました。 – DaveC426913
ところで、私は混合の結果で、私が読んだの変化に基づき、DOCTYPEのいくつかの組み合わせを試してみた： \t \t < - 動作しません - ！>！ PUBLIC> \t <！ - works - > <！DOCTYPE html> \t \t <！ - 動作しません - > ＃2がHTML4に劣化しているかどうか、または本当にHTML5で作業しています。 –
DaveC426913