IE8 не будет стилизовать элемент figcaption с помощью JQuery и html5shiv - PullRequest
Новая
       1

IE8 не будет стилизовать элемент figcaption с помощью JQuery и html5shiv

1 голос
/ 30 марта 2011

У меня есть скрипт JQuery, который манипулирует DOM для создания <figure> и <figcaption>.К сожалению, я не могу стилизовать <figcaption> с помощью CSS в IE8.Один и тот же код отлично работает для Chrome и Firefox.Есть идеи, почему IE8 не будет стилизовать элементы?

Я использую скрипт HTML5Shiv с IE8, поэтому он должен распознавать новые элементы HTML5 и позволять мне стилизовать их.Вот код, и спасибо за проверку: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>     
<title>Untitled</title>
<style>
    body {
               width: 600px;
               margin-left: auto;
               margin-right: auto;
    }
    figure {
              float: left;
    }
    figcaption {
              display: block; 
              text-align: center;
              font-size: 0.5em; 
              font-style: italic;
              font-weight: bold;
              padding: 5px 0;
   }
</style>
</head>

<body>

<img src="http://placehold.it/350x150" alt="This should be bold, italic, centered and small" />

<p>This is a regular paragraph.</p>

<script>
$(document).ready(function() {
$('img').wrap('<figure></figure>');
$('img').after('<figcaption>This should be bold, italic, centered and small</figcaption>');
});
</script>

</body>
</html>

Ответы [ 2 ]

4 голосов
/ 30 марта 2011

Вам нужен HTML5 innerShiv для стилизации динамических элементов HTML5.

0 голосов
/ 30 марта 2011

Я думаю, это потому, что shiv js должен обработать все элементы перед применением CSS (обратите внимание, что это не сработает, если вы поместите shiv js ниже CSS)

поэтому, когда вы добавляете элементы после загрузки документа, shiv js не запускается повторно для их повторной обработки (извините за мою терминологию!)

работает нормально, если вы измените figure и figcaption на div с классами и добавите те же классы к figure и figcaption в CSS, но вы, вероятно, уже знали это ... на всякий случай .. например, 

$(document).ready(function() {
$('img').wrap('<div class="figure"></div>');
$('img').after('<div class="figcaption">This should be bold, italic, centered and small</div>');
});


figure, .figure {
          float: left;
}
figcaption, .figcaption {
          display: block; 
          text-align: center;
          font-size: 0.5em; 
          font-style: italic;
          font-weight: bold;
          padding: 5px 0;

}

вы можете, если хотите быть чистым, только подать версию div в IE, страница все равно будет «проверять» html5, или вы можете добавить пустые элементы на страницу одновременно с изображением, а затем заполнить их с помощью JQuery

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...