Question

我正在使用jQueryUI手风琴小部件来提供我需要的功能。我不熟悉IE调整，所以解决方案让我感到厌烦。

如果您访问我的test site，请尝试使用现代浏览器（如Firefox，Opera或Chrome）扩展类别。它按预期工作。

然而，当使用 IE8 时，类别树会向左移动一点，类别本身之间甚至会有更大的分离。

我该怎么做才能解决这种不良行为？

（注意：忘记IE6,7支持，它只需要工作，看起来不漂亮。）

Answer 1

从类别类中删除宽度，在ie8中尝试并且问题消失

Answer 2

您的HTML5标记格式不正确。这可能没有帮助。你拥有的列表元素的数量很长，所以我只是给出一个snippit。

<div class="widget-box">
    <h1>MENÚ PRODUCTOS</h1>
    <div class="content">
        <div class="categories">
            <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/66">CCTV</a><p class="subtext">Circuito cerrado de televisi&#243;n </p></h3>
            <div>
                <ul>
                    <div class="categories">
                        <h3><img src="http://i.imgur.com/TThAk.gif" /><a href="/Productos/Categoria/74">Camaras</a><p class="subtext"></p></h3>
                        <div>
                            <ul>
                                <div class="categories">
                                    <h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
                                    <div>
                                        <ul></ul>
                                    </div>
                                </div>
                                <div class="categories">
                                    <h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
                                    <div>
                                        <ul></ul>
                                    </div>
                                </div>

在上面的第7行和第11行，您有UL标签，但随后继续使用DIV标签。 UL标签每个W3只能有一个LI元素作为子元素。 http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html

我认为你的HTML可能更接近这个：

<div class="widget-box">
    <h1>MENÚ PRODUCTOS</h1>
    <div class="content">
        <ul>
        <li>
            <h3><a href="#">CCTV <b>Circuito cerrado de televisi&#243;n</b></a></h3>
            <ul>
            <li>
                <h3><a href="#">Camaras</a></h3>
                <ul>
                <li><a href="#">Camaras Infrarrojas</a></li>
                <li><a href="#">Profesional</a></li>
                </ul>
            </li>

尽管如此，标签的语义使用可能比我在这里得到的更好。

然后，您可以在H3＆gt;左侧添加一个小填充。标记并使用+/- gif作为可与CSS类交换的背景图像。这将使交换真正直接在jQuery中简单地切换点击的锚类。这将有助于解决我之前提到的错误。

我希望这有点帮助，因为Yucel似乎有另一个问题的解决方案，但可能会有更多的HTML问题。

干杯！

为什么我的HTML类别菜单在扩展子类别时会向右移动？

2 个答案: