如何为 Internet Explorer 8 处理 nth-child答案

【问题标题】：How to handle nth-child for internet explorer 8如何为 Internet Explorer 8 处理 nth-child
【发布时间】：2013-01-22 20:52:14
【问题描述】：

我有一个 php 脚本，它调用一系列显示如下的图像：

这是调用它们的 php 代码：

<?php

$query = "SELECT
parent_business_id,
image_url,
alt_tag,
description,
thumb_url,
business
FROM
images
ORDER BY
RAND()
LIMIT
6
";

$result = mysql_query($query, $dbc)
or die (mysql_error($dbc));

while($row = mysql_fetch_array($result)) {

$parent = $row["parent_business_id"];
$image = $row["image_url"];
$alt = $row["alt_tag"];
$description = $row["description"];
$thumb = $row["thumb_url"];
$business = $row["business"];

$mainthumb = "./images/270x270/$image.jpg";

echo

"<div class='gallery_image_container'>

<a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>

</div>";

}

?>

目前我正在使用 css3 的 nth-child 为中心图像添加边距：

div.gallery_image_container:nth-child(3n+2){
margin-left:10px;
margin-right:10px;
}

我遇到的问题是这在支持 css3 但 ie 7 和 ie 8 不支持的浏览器中效果很好，我需要一个解决方案。我在想也许我可以通过在 php.ini 中添加类来做到这一点。如果是这样，我将使用哪个功能。 php 中是否有类似 nth-child 的选择器？

【问题讨论】：

PHP 并没有真正的 nth-child 选择器，但是您可以自己做，当您循环打印它们时，如果它是第 2 项、第 5 项等，只需添加类。
离题，但值得一提的是：ORDER BY RAND() 是一种极其缓慢的查询方式。它基本上必须加载整个表。这对于小表来说很好，但如果你有很多数据，ORDER BY RAND() 会给你带来非常糟糕的性能问题。
也离题了，但绝对值得一提：PHP 中的mysql_xxx() 函数已被弃用。这意味着 PHP 正在放弃对它们的支持，并可能在未来的版本中将它们完全从语言中删除。无论如何，不管怎样，它们长期以来一直被认为是过时且不安全的。强烈建议改用 PHP 提供的更好的 mysql API 之一，mysqli 或 PDO。
@SDC 该表相对较小，所以我不太担心性能问题。但是，如果有更好的方法，我愿意接受建议。感谢您的评论。
@SDC depecated 函数是一个问题。我将不得不对此进行调查。当谈到 mysql 和 php 时，我几乎是个新手。这会是一个痛苦的转变吗？

标签： php css internet-explorer css-selectors

【解决方案1】：

正如 Andy 在 cmets 中提到的，您可以找出必须向哪些元素添加 PHP 类。您只需要一个模除法。

纯 CSS 解决方案需要您改进 HTML。它显然是一个图像列表，因此：使用一个列表。生成的 HTML 应如下所示：

<ul class="gallery_container">
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    […]
</ul>

现在在 CSS 中删除您的 :nth-child 规则，改为添加以下两条规则：

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}

【讨论】：

优秀的解决方案，戴夫。非常感谢。在您编辑答案之前，您的 10px 是正确的。

【解决方案2】：

如果您想使用 IE8 不支持的 CSS 选择器，例如 nth-child，我的建议是使用 Selectivizr。

Selectivizr 是一个 Javascript 库，可将一系列 CSS 选择器反向移植到旧版本的 IE 中，以便您的标准 CSS 代码可以在所有浏览器中保持不变。

另一个替代方案是一个名为 ie7.js 的旧脚本（及其更高版本的 ie8.js 和 ie9.js），它也做同样的事情，并修复了 IE 中的许多其他错误和怪癖。但我更喜欢 Selectivizr，因为它更有针对性（即它的功能不如 ie7.js），而且它的代码更新得多，这两者都应该意味着它的性能更好。

【讨论】：

【解决方案3】：

你可以试试

$(identifier:nth-child(3n+2)').addClass('styleClassName');

使用 jQuery

【讨论】：

我不认为在这里发布 Javascript 解决方案有任何帮助。特别是如果它依赖于框架。这可以（并且应该）使用 CSS 来完成，或者，如果没有其他方法，可以使用 PHP。