javascript - 在firefox中不支持W3Schools slidehorizontal javascript - Thinbug

在firefox中不支持W3Schools slidehorizontal javascript

时间：2011-12-10 07:23:30

标签： javascript html css

find below link for slide horizontal

http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal 它的工作正常，但在Firefox中它不支持因为Doctype如果我删除doctype它支持，PLZ帮助我解决这个兼容的问题

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript">
// scrit for slider start here
     var i = -320;
     var intHide;
     var speed = 10;
     function showmenu() {
         clearInterval(intHide);
         intShow = setInterval("show()", 10);
     }
     function hidemenu() {
         clearInterval(intShow);
         intHide = setInterval("hide()", 10);
     }
     function show() {
         if (i < -12) {
             i = i + speed;
             document.getElementById('myMenu').style.left = i;
         }
     }
     function hide() {
         if (i > -320) {
             i = i - speed;
             document.getElementById('myMenu').style.left = i;
         }
     }
</script>

<style type="text/css">
    div.Main
    {
        background-color: #f1f1f1;
    }
    div.Treemenu
    {
        background: #741918;
        height: auto;
        width: 323px;
    }
    div.Treenav
    {
        background: #741918;
        position: absolute;
        font: bold 80% arial;
        top: 0px;
        left: -320px;
        width: 350px;
        color: White;
        float: left;
    }
    div.collection
    {
        float: right;
        cursor: default;
        padding: 0;
        font-size: 16px;
        font-weight: bold;
        background-image: url( '/_layouts/images/B2E/Collection_Bg.png' );
        background-repeat: no-repeat;
        background-color: #741918;
        width: 27px;
        font-family: Calibri;
        padding: 5px 0 0 0;
    }
</style>

<div class="Main">
    <p>
        content content content content</p>
    <div id="myMenu" class="Treenav" onmouseover="showmenu()" onmouseout="hidemenu()">
        <div class="collection">
            <<br />
            C<br />
            O<br />
            L<br />
            L<br />
            E<br />
            C<br />
            T<br />
            I<br />
            O<br />
            N
        </div>
        <div class="Treemenu">
            <p>
                Treemenu Treemenu Treemenu Treemenu</p>
            <p>
                Treemenu Treemenu Treemenu Treemenu</p>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：1)

您正在将CSS left属性设置为Number，但它只接受length，并且0的长度必须具有单位（例如27px }}）。