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

Question

我试图弄清楚如何使水平手风琴居中，而 Internet Explorer 6 和 7 中没有给出宽度。我正在使用 XHTML 1.0 Strict。 在Webkit和Mozilla中它只是display: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% 符合标准的网站，甚至不允许产生警告）