A-AA+then

ถามเรื่องการแสดงผล CSS ของIE6

2,862
สวัสดีครับ






อันนี้ ทดสอบในie7 ครับ
พอie6  มันไม่ขึ้น drop down ลงมาครับ

ต้องการเขียนให้ลองรับ 2 ตัวนี้ครับ


พอศึกษา จาก http://www.goragod.com/knowledge/2/CSS%20Hack.html?q=css+ie6

วิธีที่แก้ไข ที่ลองแล้ว  ไม่สำเร็จ
- *html ที่ css แล้ว
- <!--[if IE 6]><link href="style.css" rel="stylesheet" type="text/css" /><![endif]-->



css
Filename  :  menu_style.css

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/

        }
    .menu li:hover ul{
        display:block;
       
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
       
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }    

//--------------------------------------------------------------------------------------------

-html

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    
    <link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
    <br>
    <br>
    <div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Products</a>
                <ul>
                    <li><a href="#">Drop Down CSS Menus</a></li>
                    <li><a href="#">Horizontal CSS Menus</a></li>
                    <li><a href="#">Vertical CSS Menus</a></li>
                    <li><a href="#">Dreamweaver Menus</a></li>
               </ul>
          </li>
            <li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
            <li><a href="/contact/contact.php">Contact</a></li>
        </ul>
    </div>

</body>
</html>       



และถ้าจะให้รองรับ 2ตัว คือ ie6 กับ ie7  จะต้องทำยังไงบ้างครับ
ขอบคุณมากมากๆๆครับ

2 ความคิดเห็น

ie6 จะไม่รองรับ li:hover ครับ หรือพูดง่ายๆ คือ ie6 จะใช้ hover ได้กับ tag a เท่านั้น tag อื่นจะใช้ไม่ได้

การแก้ไข คงต้องใช้ Javascript ในการทำงานร่วมกับ IE6 ละครับ

ลองมองหาโค้ดเมนูแบบนี้ได้ที่ dynamicdrive.com ครับ

แต่โดยส่วนตัวแล้วผมเลิกใช้ ie6 แล้วครับ (และเลิกเขียนโค้ดให้รองรับ ie6 แล้วด้วย)
1

จาก เว็ปนี้ครับ http://www.visibilityinherit.com/code/ie6-hover-javascript.php

มีcode แบบนี้ครับ
<script type="text/javascript">
// suckerfish hover effect for ie6
sfHover = function() {
    // specify hovered element and div in which it sits 
    var sfEls = document.getElementById("content").getElementsByTagName("ul");
    for (var i=0; i<sfEls.length; i++) {
        sfEls.onmouseover=function() {
            this.className+=" hover";
        }
        sfEls.onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>



แต่ที่ผมไม่เข้าใจว่า  บรรทัดนี้ จะไปใส่ไว้ไหนครับ?
var sfEls = document.getElementById("content").getElementsByTagName("ul");
Second: within in the script itself specify the element you would like to 
show a hovered effect on, and the <div> in which the element sits.


2
^