使用Ajax加载div中的CSS难度

Question

当我将页面加载到div时，我遇到了CSS问题。

Firefox完美加载CSS，但在Chrome中，它不会加载已加载页面的CSS样式。

仅当我使用元素应用样式时才有效，例如

<table style="left:100px;top:50%;position:fixed">

只有这样才能在Chrome中使用。

但这不起作用：

<style type="text/css">
.mystyle {
    left:100px;
    top:50%;
    position:
    fixed;
}   
</style>
<table class="mystyle">

有没有办法解决这个问题？

Answer 1

我猜你通过AJAX加载的页面在该页面的头部有自己的样式。虽然这可以/应该有效，但我建议将您网站的所有样式放在一个或多个外部样式表中，并在每个页面加载它们。当您通过AJAX在div中加载HTML内容时，样式已经存在并将应用于新内容。

在大多数情况下，将样式放在外部样式表中是出于多种原因的最佳做法。

Answer 2

你忘记了吗？在固定的结束？

<table style="left:100px;top:50%;position:fixed;">

Answer 3

我很想知道是否：

<style type="text/css">
    .mystyle {
        left:100px;    
        top:50%;    
        position:    
        fixed;
    }

       </style>

如果要将其格式化为

，

将起作用

<style type="text/css">
.mystyle 
{
   left: 100px;    
   top: 50%;    
   position: fixed;
}
</style>
<table class="mystyle">

但正如其他人所说，我更愿意在外部样式表文件中看到它并以这种方式链接。