CSS 样式不适用于 iframe 中显示的页面答案

【问题标题】：CSS styles not applying to page displayed in an iframeCSS 样式不适用于 iframe 中显示的页面
【发布时间】：2016-05-06 17:57:16
【问题描述】：

我有一个外部 CSS 文件，我将 <link> 放入我正在运行的文件中。某些样式已应用，但其他样式未应用。我遵循了在 W3Schools 等其他地方找到的语法以及此处的其他问题。但我仍然无法让其中一些工作。 hover 有效，但 collapse-border: collapse 无效。 background-color 行也不行。这是我在 css 文件中的内容：

#OuterTable tr:hover{background-color: #f5f5f5;}
#OuterTable {border-collapse: collapse;}
#OuterTable tr:nth-child(odd) {background-color: #fff;}
#OuterTable tr:nth-child(even){background-color: #e5e5e5;}

#MaterialByState tr:hover{background-color: #f5f5f5}
#MaterialByState tr:nth-child(odd) {background-color: #fff}
#MaterialByState tr:nth-child(even){background-color: #e5e5e5}
#MaterialByState {border-collapse: collapse}

#Name 是我单击链接时在主页的 iFrame 中显示的表格的 ID。表格显示，它们只是没有按照我想要的方式格式化，我无法弄清楚我在这里做错了什么。我已经尝试过使用和不使用上面的;，但两种方法都没有区别。如果我将collapse-border: collapse 放在包含表格的文件中，我可以让它工作，但是关于背景颜色的其他行放在那里时不起作用。而且我希望它们都在同一个地方，这样我就可以在同一个地方更新它们，而不是在我的代码中寻找表格。我正在使用 PHP 代码从数据库中提取数据，所以它不是最漂亮或最容易通过的。

编辑我正在使用主页链接到其他页面并将它们显示在 iFrame 中。在我显示的其他页面上，我在调用其他表的文件中链接了 css：

<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';

所以 iFrame 中的 HTML 看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>QDef</title>
</head>
<body>
    <h2>This will pull down all the Queries from the QDef table</h2>
<link rel="StyleSheet" href="StyleSheet.css" type="text/css">

CSS 看起来和上面一样。

编辑

这是我试图在 iFrame 中显示的 QDef.php 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>QDef</title>
    <!--style type="text/css">
        table
        {
            border-collapse: collapse
        }
       #OuterTable tr:nth-child(odd) {background-color: #fff}
       #OuterTable tr:nth-child(even){background-color: #e5e5e5}
       #OuterTable tr:hover{background-color: #f5f5f5}
    </style-->
    <link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
    <h2>This will pull down all the Queries from the QDef table</h2>
<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" href="StyleSheet.css" type="text/css">';
try
{
    $conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
    //set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1);
    echo "Connected Successfully<br>" /*. $conn*/;
    /*If conncected see if we can pull any data!*/
}
catch(Exception $e)
{
    die( print_r( $e->getMessage() ) ); 
}

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs";
//echo $tsql . "<br>";
$getqueries = $conn->query($tsql);

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC);

$countqueries = count($queries);

if(isset($countqueries))
{    
    if($countqueries > 0)
    {
        //echo "There are queries returned";

        BeginQueriesTable($countqueries);
        foreach($queries as $query)
        {
            PopulateQueryTable($query);
        }
        EndQueriesTable();
    }
    else
    {
        echo "<br>Values returned: $countqueries";
    }
}
else
{
    echo "No count";
}

function BeginQueriesTable($rowCount)
{
    $headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef");
    echo "<table align='center' cellpadding='5' border='1' id=" . chr(34) . "OuterTable" . chr(34) . ">";
    echo "<thead valign=" . chr(34) . "top" . chr(34) . ">";
    echo "<tr>$rowCount Results</tr><tr bgcolor='silver'>";
    foreach ($headings as $heading)
    {
        echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>";
    }
    echo "</tr>";
}

function PopulateQueryTable($values)
{
    //$queryID = $values['ID'];
    echo "<tbody valign=" . chr(34) . "top" . chr(34) . "><tr>";
    foreach($values as $key=>$value)
    {
        if (!is_null($value))
        {
            echo "<td white-space: nowrap style overflow-x: scroll>$value</td>";
        }
        else
        {
            echo "<td>N/A</td>";
        }
    }
    echo "</tr>";
}

function EndQueriesTable()
{
    echo "</tbody></table><br/>";
}

?>        
</body>
</html>

上面已经显示了 CSS 文件。

这里是主页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TestingSwitchingMainPage</title>
    <style type="text/css">
        table
        {
            border-collapse: collapse
        }
    </style>
    <link rel="StyleSheet" href="style.php" type="text/css">
</head>
<body>
    <UL>
        <LI><A Href="MainPage.aspx" target="MainPage">Main</A>
        <LI><A Href="QDef.php" target="MainPage">Material Tracking QDef</A>
        <LI><A Href="MaterialTrackingAllStates.php" target="MainPage">Material Tracking All rows with State</A>
        <LI><A Href="SearchStateProject.php" target="MainPage">Material Tracking Searh by State or Project Number</A>
        <LI><A Href="TestPHP.php" target="MainPage">Material Tracking PHP Info</A>
    </UL>
    <iframe src="MainPage.aspx" Width=100% Height=750 name="MainPage" FrameBorder=0>
        This will show up if the browser doesn't understand IFrame.
    </iframe>
</body>
</html>

我不知道这是否会让您更清楚，因为我正在使用 php 从 SQL Server 中提取数据，然后将其显示在表中。应该显示在 iFrame 中。我可以自行拉出 QDef.php 文件，但样式仍未应用。如果这有什么不同，我正在 IE11 中对此进行测试。无论我使用什么浏览器，我都希望它能够被使用。

编辑 2

根据@Mr Lister 推荐的 W3C Validation Checker 的建议，我对我的 CSS 文件进行了一些更改。现在看起来像这样：

#OuterTable tr:hover{background-color: #0094ff;}
#OuterTable {border-collapse: collapse;}
#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame
#OuterTable tr:nth-child(even){background-color: #e5e5e5 !important;} iFrame

#MaterialByState tr:hover{background-color: #0094ff}
#MaterialByState tr:nth-child(odd) {background-color: #fff}
#MaterialByState tr:nth-child(even){background-color: #e5e5e5}
#MaterialByState {border-collapse: collapse}

#OuterTable, td, th {border:  1px solid black}
#OuterTable, thead {text-align: left}
#OuterTable {text-align: left}
#OuterTable, td, th {white-space: nowrap}
#OuterTable, td, th {vertical-align: bottom}
th {background-color: #808080; color: #fff}
td, th {padding: 5px}
tr:nth-child(odd) {background-color: #fff}
tr:nth-child(even) {background-color: #e5e5e5}

#OuterTable thead, table tbody {
    border-collapse: collapse;
    text-align: left;
}

#OuterTable tbody {
    width:  100%;
    overflow-x: scroll;
}

#OuterTable tbody:nth-child(odd) {
  background: #f5f5f5;
  border: solid 1px #ddd;
}

#OuterTable tbody:nth-child(even) {
  background: #e5e5e5;
  border: solid 1px #ddd;
}

我已经从 HTML 中提取了几乎所有的表格格式，并将其放入 CSS 文件中。到目前为止，除了使行交替颜色外，一切正常。我以几种不同的方式添加了我发现的代码，以尝试使其正常工作。我有#OuterTable tr:nth-child(odd) {background-color: #fff !important;} iFrame，我有这个tr:nth-child(odd) {background-color: #fff}，我有这个#OuterTable tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }

当此页面的其他所有方法都正常时，这些不同的方法都不起作用。我还能做些什么来使它正常工作？

【问题讨论】：

CSS override body style for content in iframe?的可能重复
我刚刚添加了一个编辑。这与另一个问题不重复。除了 CSS 文件，我没有任何其他格式或样式
我尝试将!important 添加到我想要生效的行中，没有变化。
仍在尝试设置 iframe 样式
CSS 是否不适用于正在显示的表格？我将它链接到正在调用并显示在 iFrame 中的文件中？

标签： php html css iframe

【解决方案1】：

我无法让样式 tr:nth-child(odd) {background-color: #fff} tr:nth-child(even) {background-color: #e5e5e5} 起作用，但我确实找到了解决方法。我给<tr></tr> 上了一节课。我用 2 个不同的类名（row 和 row1）交替了这个类，然后对我的 css 进行了更新以拥有 .row1 {background-color: #fff} .row {background-color: #e5e5e5} 这给了我想要获得的带状行，而我尝试的其他方式却无法获得。我还必须更新 PHP 脚本来进行类的交替，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>QDef</title>
    <link rel="StyleSheet" href="StyleSheet.css" type="text/css">
</head>
<body>
    <h2>This will pull down all the Queries from the QDef table</h2>
<?php
$servername = "Server";
$username = "User";
$password = "Password";
$dbname = "DBName";
echo '<link rel="StyleSheet" type="text/css" href="StyleSheet.css">';
try
{
    $conn = new PDO("sqlsrv:server=$servername;database=$dbname", $username,$password);
    //set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $conn->setAttribute(PDO::SQLSRV_ATTR_QUERY_TIMEOUT, 1);
    echo "Connected Successfully<br>" /*. $conn*/;
    /*If conncected see if we can pull any data!*/
}
catch(Exception $e)
{
    die( print_r( $e->getMessage() ) ); 
}

$tsql = "select Id,QSrc,QName,isActive,RunReport,FilePath,QDef from pmdb.v_QDefs";
//echo $tsql . "<br>";
$getqueries = $conn->query($tsql);

$queries = $getqueries->fetchALL(PDO::FETCH_ASSOC);

$countqueries = count($queries);

if(isset($countqueries))
{    
    if($countqueries > 0)
    {
        //echo "There are queries returned";

        BeginQueriesTable($countqueries);
          $CountValues = 1;     /**********Added************/
        foreach($queries as $query)
        {
            PopulateQueryTable($query,$CountValues);/******Updated******/
            $CountValues = !$CountValues;/***********Added**************/
        }
        EndQueriesTable();
    }
    else
    {
        echo "<br>Values returned: $countqueries";
    }
}
else
{
    echo "No count";
}

function BeginQueriesTable($rowCount)
{
    $headings = array("Id","QSrc","QName","isActive","RunReport","FilePath","QDef");
    echo "<p>$rowCount Results</p>";
    echo "<table class=" . chr(34) . "tab" .chr(34) . "id=" . chr(34) . "OuterTable" . chr(34) . ">";
    echo "<thead>";
    echo "<tr>";
    foreach ($headings as $heading)
    {
        echo "<th class=" . chr(34) . "cell" . chr(34) . ">$heading</th>";
    }
    echo "</tr>";
}

function PopulateQueryTable($values,$Number)/******Updated*******/
{
    //$queryID = $values['ID'];

    echo "<tbody><tr class=" . chr(34) . "row" . ($Number) . chr(34) . ">";/*******Updated**********/
    foreach($values as $key=>$value)
    {
        if (!is_null($value))
        {
            echo "<td>$value</td>";
        }
        else
        {
            echo "<td></td>";
        }
    }
    echo "</tr>";
}

function EndQueriesTable()
{
    echo "</tbody></table><br/>";
}

?>        


</body>
</html>

您可以看到我添加了一个计数器，每次将一行处理到表中时它都会更新，以便每一行都有不同的类。

感谢所有帮助过的人！我希望这个答案能帮助其他有类似问题的人。

【讨论】：