Question

我正在进行网站设计和开发我面临以下问题请帮助我...... !!!

我有三个标签它完全可以在IE9，Firefox，Chrome，Safari和Opera上使用。

我只使用CSS3＆amp;我不想要任何脚本语言＆amp;想在所有浏览器上完美地工作帮助我...

你也可以看到here

我的Html代码：

<article class="tabs">

    <section id="tab1">
        <h2><a href="#tab1">Tab 1</a></h2>
        <p>This content appears on tab 1.</p>
    </section>

    <section id="tab2">
        <h2><a href="#tab2">Tab 2</a></h2>
        <p>This content appears on tab 2.</p>
    </section>

    <section id="tab3">
        <h2><a href="#tab3">Tab 3</a></h2>
        <p>This content appears on tab 3.</p>
    </section>

</article>

＆安培;我的css代码是：

article.tabs
{
    position: relative;
    display: block;
    width: 40em;
    height: 15em;
    margin: 2em auto;
}

article.tabs section
{
    position: absolute;
    display: block;
    top: 1.8em;
    left: 0;
    height: 12em;
    padding: 10px 20px;
    background-color: #ddd;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    z-index: 0;
}

article.tabs section:first-child
{
    z-index: 1;
}

article.tabs section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    width: 120px;
    height: 1.8em;
    top: -1.8em;
    left: 10px;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
    border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(2) h2
{
    left: 132px;
}

article.tabs section:nth-child(3) h2
{
    left: 254px;
}

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.8em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}

article.tabs section:target,
article.tabs section:target h2
{
    color: #333;
    background-color: #fff;
    z-index: 2;
}

article.tabs section,
article.tabs section h2
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

提前谢谢...... !!

Answer 1

此处的问题是您使用的是IE7 / 8中不支持的浏览器功能。

:first-child在IE7中不可用。
:nth-child()在IE7或IE8中不可用。
:target在IE7或IE8中不可用。
transition在IE10之前无法使用。
box-shadow，border-radius和rgba()颜色。
最重要的是，您使用的是{* 1}}和section等HTML5代码，IE8及更早版本不支持这些代码。

大多数这些要点都可以通过polyfill脚本来解决，但既然你说你不想使用任何脚本，那么不幸的是你有点卡住了。

如果你真的不想使用任何脚本（例如使用article标签而不是div和{{1}，那么只需使用旧式替代品就可以解决一些问题。 }），但你的代码的主要观点是提供一个使用CSS section来切换标签的标签界面，简短的回答是这在IE8或更早版本中不起作用，我不知道任何非脚本替代方案。

所以我认为这里的真正要点是，如果你想支持IE7 / 8，你有使用一些javascript代码。

您可以使用polyfill脚本来回传您正在使用的CSS / HTML5功能，这意味着支持这些功能的新浏览器不必使用脚本，但旧版浏览器需要它们。对不起。

有关Polyfills的更多信息：

“Polyfill脚本”是各种javascript库的通用术语，这些库专门用于为旧版浏览器提供对较新功能的支持（主要是针对旧的IE版本）。

编写每个polyfill脚本是为了支持特定的浏览器功能，因此对于像您这样的代码，您可能需要多个polyfill才能获得完整的功能奇偶校验。但是，在某些情况下，对于不太重要的功能，您可能只想留下它以便旧的IE版本不能获得所有功能 - 例如article很好，但它不会破坏网站如果它不支持。

一些肯定会帮助你的polyfills：

Selectivizr - 添加了对{3}}，:target等CSS3选择器的支持。
Modernizr - 添加对HTML5元素的支持，并提供使用其他polyfill的功能检测框架。
CSS3Pie - 添加对border-radius，:nth-child()等内容的支持。

还有一个很大的填充脚本列表listed here。您可以随意浏览列表并选择您认为最有用的列表。

关于所有polyfill，要记住的一件重要事情是它们不是浏览器的官方部分;他们只是有人写过的小JS库。这意味着他们不能保证100％工作。它们可以解决作者的问题，但与现代浏览器中的真实功能相比，它们的功能也可能缺少功能或缺口。它们也可能减慢速度并相互冲突（特别是如果你使用其中的几个）。

同样，您将不得不忍受这一点，因为当您想要支持旧浏览器中的现代浏览器功能时，这就是事物的本质。为旧浏览器添加功能可以采取哪些措施。

最终，如果你真的需要使用现代功能，你可能需要完全停止支持一些旧的浏览器 - 尤其是IE7。

为什么IE7和IE8只显示第一个标签的内容？

1 个答案: