مركز محاذاة الأكورديون الأفقي في IE (العروض الديناميكية)

Question

أحاول معرفة كيفية التركيز على الأكورديون الأفقي دون عرض معين في Internet Explorer 6 و 7. أعمل في XHTML 1.0 صارمة. في Webkit و Mozilla عرضه فقط: الجدول. لقد جربت كل ما يمكنني التفكير فيه وأي شيء قد يكون لي lmgtfy لي ... لكنه لا يعمل فقط.

لقد نشرت المثال في:http://ableobject.com/horaccordion.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;
}

مسج / جافا سكريبت:

        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٪ لا يسمح حتى بإنتاج تحذيرات)