【问题标题】：CSS not working but <style> working Div with IframeCSS 不工作，但 <style> 与 iframe 一起工作 Div
【发布时间】：2019-05-19 14:50:51
【问题描述】：

内部格式在我的 HTML 上的标签中有效，但在链接的 CSS 文件中无效。不知道为什么！？

我尝试重命名课程并在线搜索解决方案，但找不到任何对我有帮助的东西。

<div class="Inner">
<iframe src="Form.php" name="Inside" allowTransparency="false" scrolling="yes" frameborder="1" width="100%" height="100%">
</iframe>
            
</div>

.Inner {
    color: black;
    position:fixed;
    width: 900px;
    height:900px;
    left: 300px;
    top:100px;
    border: 3px solid red;
}

我将它执行为左 300 像素和顶部 100 像素，但这仅在我将其包装在我的 HTML 页面上的标签中但不适用于链接的 CSS 文件时才有效（CSS 适用于所有其他标签，即导航/标题。

编辑

完整的 CSS 样式文件

/*HTML 5 display rule*/
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, section, summary {
display:block
}

.Inner {
    color: black;
    position:fixed;
    width: 900px;
    height:900px;
    left: 300px;
    top:100px;
    border: 3px solid red;
}

table {
  border-collapse: collapse;
}

table, tr, th {
border: 1px solid black;
font-family:"League Spartan",Arial ;
}

h1{
    font-family:"League Spartan",Arial ;
    color:#fff;
    text-shadow:2px 2px 2px #000000;
}

@font-face {
    font-family: 'League Spartan';
    src: url('U:/Web Development/fonts/leaguespartan-bold.eot');
    src: url('U:/Web Development/fonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
         url('U:/Web Development/fonts/leaguespartan-bold.woff2') format('woff2'),
         url('U:/Web Development/fonts/leaguespartan-bold.woff') format('woff'),
         url('U:/Web Development/fonts/leaguespartan-bold.ttf') format('truetype'),
         url('U:/Web Development/fonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
    font-weight: bold;
    font-style: normal;

}



nav {   
    font-family:League Spartan, Arial;
    float:left;
    color:black;
    width: 300px;
    height:800px;
    position:fixed;
    background-color:#17499b;
    top: 100px;
    left:0px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;

    box-shadow:0px 0px 10px #000000 inset;
    /*-webkit-box-shadow:0px 5px 10px #000000 inset; /*safari*/
    
}
nav li{
        font-family:League Spartan, Arial;
    list-style-type:none;
}
nav ul li a{
        font-family:League Spartan, Arial;
    float:left;
    text-align:left;
    text-decoration:none;
    display:block;
    padding-top:50px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:20px;
    font-size:10px;
    /* css3 transition */
    -webkit-transition:all .5s;
    -o-transition-property:all;
    -o-transition-duration:.5s;
    -moz-transition-property:all;
    -moz-transition-duration:.5s;
    transition-property:all;
    transition-duration:.5s;

    border: .5px solid black;
    width:200px;
    display: inline;
    padding: 7.5px;
    box-shadow:0px 0px 5px #000000;
    -webkit-box-shadow:0px 0px 5px #000000; /*safari*/
    
}
nav li a:link{
    font-family:League Spartan, Arial;
        text-decoration:none;
    color:#333;
    
}
nav li a:visited{
    font-family:League Spartan, Arial;
        text-decoration:none;
    color:#333;
}
nav li a:hover{
    font-family:League Spartan, Arial;
    font-weight:bold;
    color:#0800ff;
    background-color:#5b9819;
    box-shadow: 0px 0px 5px #000000 inset;
    -webkit-box-shadow:0px 0px 5px #000000 inset; /* safari */
}
nav li a:active{
    font-family:League Spartan, Arial;
        font-weight:bold;
    color:#333;
    background-color:#000000;
}


header{
        font-family:League Spartan, Arial;
    line-height:25px;
    text-align :center;
    
    border:0px solid black;
    color:black;
    width:100%;
    height: var(--TitleHeight);
    background-color:  var(--maincolor);
    position:fixed;
    left:0px;
    top:0px;
    box-shadow:0px 0px 10px #000000 inset;
}

完整的 HTML。

<!DOCTYPE html>
<html>

<head>
<title> RESOURCE FORGE </title>

<meta name="keywords" content="KEY WORD1, KEYWORD 2, KEY WORD3" />
<meta name="description" content ="Description for the website" />
<meta name="aurthor" content="Chris Livermore" />

<link rel="stylesheet" type="text/css" href="stylesheet1.CSS" />

</head>
<body>

    <div class="Inner">
          
        <iframe src="Form.php" name="Inside" allowTransparency="false" scrolling="yes" frameborder="1" width="100%" height="100%">
        </iframe>
            
    </div>
    
    <nav>
        <h2>NAVIGATION</h2>
        <h4>CHAPTER 1</h4>
        <ul>
            <li><a href="Form.php" target="Inside">USER INPUT</a> </li>
            <li><a href=# target="Inside"></a> </li>
            <li><a href="Contact_Form.php" target="Inside">Add New Contact</a> </li>
            <li><a href="phonelistFN.php" target="Inside">View Phone List</a> </li>
            <li><a href="easyinporter.php" target="Inside">EASY INPORTER</a> </li>
            <li><a href="C1 T6 - Images.html" target="Inside">T6 - Images</a> </li>
            <li><a href="C1 T7 - Tables.html" target="Inside">T7 - Tables</a> </li>
        </ul>
    </nav>
    <header>

        <h1>RESOURCE FORGE</h1>
        <p>This Site is currently under development- some features may be missing or partially completed </p>
    </header>

</body>


</html>

如您所见，我正在使用导航栏在 Inner div 中加载新页面。无法理解为什么它不能在样式标签中正常工作，但在其他一切正常时却不能在 CSS 文件中正常工作？

【问题讨论】：

你能提供完整的脚本或者一个可运行的程序（类似于 JSFiddle）吗？有很多可能出错的地方。 CSS 文件是从您的 HTML 页面加载的吗？清除缓存有用吗？

标签： html iframe divide

【解决方案1】：

这是由于 Chrome 缓存。清除它并且格式化工作。

【讨论】：