CSS трудности в загруженном div с Ajax

Question

У меня проблемы с CSS, когда я загружаю страницу в div.

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, имеет свои собственные стили в заголовке этой страницы. Хотя это может / должно работать, я предлагаю поместить все стили для вашего сайта в одну или несколько внешних таблиц стилей и загружать их на каждой странице. Когда вы затем загружаете контент HTML в div через AJAX, стили уже будут там и будут применяться к новому контенту.

Размещение стилей во внешней таблице стилей в большинстве случаев является наилучшей практикой по ряду причин.

Answer 2

Мне было бы интересно, если это:

<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">

НО, как предлагают другие, я бы предпочел видеть его во внешнем файле таблицы стилей и связывать таким образом.

Answer 3

Вы забыли; на конец исправили?

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