如何處理第n個孩子的Internet Explorer 8

我有一個PHP腳本調用一個系列的圖片顯示爲這樣：如何處理第n個孩子的Internet Explorer 8

這是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的第n個孩子邊距添加到中央圖像的時刻：

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

我遇到的問題是這個工程在支持css3的瀏覽器中很好用，但ie 7和ie 8不會，我需要一個解決方案。我在想，也許我可以通過在php中添加類來做到這一點。如果是的話，我會使用哪種功能。在PHP中有沒有像孩子一樣的選擇？

來源

2013-02-07 Richard Bell

PHP並沒有真正的n-child選擇器，但你可以自己做，當你循環打印出來，如果它是第二項，第五項等，只需添加類。 – Andy

偏離主題，但值得一提的是：'ORDER BY RAND（）'是進行查詢的極其緩慢的方式。它基本上必須加載整個表格。對小表來說很好，但是如果你有很多數據，'ORDER BY RAND（）'會給你帶來非常糟糕的性能問題。 – SDC

也脫離主題，但*絕對*值得一提：PHP中的'mysql_xxx（）'函數已棄用。這意味着PHP正在放棄對它們的支持，並可能在未來的版本中將它們完全從語言中刪除。無論如何，無論如何，他們已經被認爲已經過時並且不安全了很長一段時間。 *強烈推薦切換到使用PHP提供的更好的mysql API之一，無論是'mysqli'還是'PDO'。 – SDC

安迪在評論中提到的，你可以找出你有哪些元素添加類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現在刪除您：第n個孩子的規則，而是添加以下兩條規則：

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

來源

2013-02-07 11:34:04 dave

優秀的解決方案戴夫。非常感謝你。在編輯答案之前，你是正確的10px。 –

-1

您可以嘗試

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

使用jQuery

來源

2013-02-07 11:22:39 spathirana

我不認爲發佈Javascript解決方案在這裏有任何幫助。特別是如果它依賴於框架。這可以（也應該）用CSS來完成，或者，如果沒有其他方法，可以用PHP來完成。 – dave

如果你想使用CSS選擇器一樣在IE8中不支持的nth-child，我的建議是使用Selectivizr。

Selectivizr是一個Javascript庫，它將一系列CSS選擇器移植到IE的舊版本中，以便您的標準CSS代碼可以在所有瀏覽器中保持不變。

另一種選擇是一個名爲ie7.js（及其更高版本ie8.js和ie9.js）的舊腳本，它也做同樣的事情，並修復IE中其他錯誤和怪癖的負載。但是我的選擇是Selectivizr，因爲它更有針對性（即它不會像ie7.js那麼多）以及更新的代碼，這兩者都應該意味着它的性能更好。

來源

2013-02-07 11:42:02 SDC

如何處理第n個孩子的Internet Explorer 8

回答

相關問題