Question

我正在试图弄清楚如何在Internet Explorer 6和7中给出没有宽度的水平手风琴。我正在使用XHTML 1.0 Strict。在Webkit和Mozilla中，它只显示：table。我已经尝试了所有我能想到的东西以及任何可能让我感到振奋的东西......但它只是不起作用。

我发布了以下示例： http://ableobject.com/horaccordion.html

以下是代码：

HTML：

<div id="container">
    <div class='menuContainer'>
        <a href="#">Top-level 1</a>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 2</a>
        <div class='menu'>                         
                <a href="#">Bottom Level A1</a>
                <a href="#">Bottom Level A2</a>
                <a href="#">Bottom Level A3</a>
                <a href="#">Bottom Level A4</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 3</a>
            <div class='menu'>
                <a href="#">Bottom Level B1</a>
                <a href="#">Bottom Level B2</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 4</a>
    </div>
</div>

CSS：

#container {
    margin: 0 auto 0 auto; 
    text-align: center;
    display: table;
}

.menuContainer {
       margin: 0;
       padding: 0;
       float: left;
       height: 32px; /* For testing */
       font-family: helvetica;
       font-size: 18px;
       clip: auto; overflow: hidden;
}
.menu {
       height: 32px; /* For testing */
       clip: auto; overflow: hidden;
       float: left;
}
a, a:link, a:hover, a:visited, a:active {
       color: black;
       text-decoration: none;
       padding: 12px;
       font-weight: 700;
       float: left;
       color: #222;
}

.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
   color: black;
   text-decoration: none;
   padding: 12px;
   font-weight: normal;
   float: left;
}

JQuery的/使用Javascript：

        if( jQuery.support.opacity == true ) {
            $(".menuContainer a").hover(    
                function(){$(this).animate ({ opacity: 0.7 }, 200 );},
                function(){$(this).animate ({ opacity: 1 }, 600 );}
        );}

            else {
                $('.menuContainer a').hover( 
                    function(){$(this).css('color', '#999');},
                    function(){$(this).css('color', '#000');}
                );}

// Accordion Courtsey of Patrick @ StackOverflow : http://stackoverflow.com/users/113716/patrick 

        var $currentMenuContainer = $('#someFictionalElement');
        var $previousMenuContainer = null;

    // Iterate through each .menu element, setting the full width of each menu to a 'custom'
    //        attribute called 'fullWidth'. Since the full width should never change, this
    //        makes it easy to recall it quickly. You could use global variables instead.
    // After setting 'fullWidth', it then collapses each menu and title.
        $(".menu").each(function() {
            var $theMenu = $(this);
            var $theMenuContainer = $theMenu.parent();
            $theMenu.attr({fullWidth: $theMenu.width()});
            var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 3;  // Add a few pixels for firefix
            $theMenu.css({width: 0});
            $theMenuContainer.css({width: menuContainerWidth});
        });

        $(".menuContainer a").click(
            function() {
    // Set the current and previous elements properly
                $previousMenuContainer = $currentMenuContainer;
                $currentMenuContainer = $(this).parent();
                var $previousMenu = $previousMenuContainer.find('.menu');
                var $currentMenu = $currentMenuContainer.find('.menu');

    // Collapse the previous menu
                $previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );

    // Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
                if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);

    // Expand the current menu and its menuContainer if it's not showing
                if($currentMenu.width() == 0) {
                    // Increase the menuContainer width by the full width of its menu
                    $currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
                    // Increase the menuContainer to its full width
                    $currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
                }
        });
    });

Answer 1

<center>CONTENT</center>

如果谷歌足够好，它对你来说已经足够好了。（除非你被迫提供100％符合标准的网站，甚至不允许发出警告）

中心在IE中对齐水平手风琴（动态宽度）

1 个答案: