Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > XML, XSL > Пропадают CSS стили при трансформации

Автор: JRoma 6.5.2013, 18:31

Доброго времени суток!

Подскажите, кто знает, почему пропадают css стили при xsl трансформации у тегов div, которые генерируются в разделе <xsl:template match="item">...</xsl:template>? При чём даже тег и не влияет на отображение.

Данное поведение проявляется в IE9, Chrome, Fierfox, а вот Opera отображает всё так как я и ожидал.

Код


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="view.xsl"?>

<root>
    <title value="Числа"/>
    <body>
        <item value="Один"/>
        <item value="Два"/>
        <item value="Три"/>
    </body>
</root>

Код


<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output
        media-type="text/html" method="xml" encoding="utf-8"
        omit-xml-declaration="yes"
        doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
    />
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>test</title>
                <link rel='stylesheet' type='text/css' href='style.css'/>
            </head>
            <body>
                <div class="layout">
                    <div class="title">
                        <xsl:value-of select="root/title/@value"/>
                    </div>
                    <div class="body">
                        <xsl:apply-templates select="//item" />
                    </div>
                </div>
            </body>
        </html>
    </xsl:template>
    
    <xsl:template match="item">
        <div class="item">
            <b><xsl:value-of select="@value"/></b><br/>
        </div>
    </xsl:template>

</xsl:stylesheet>

Код


.layout{
    color: red;
}
.title{
    color: green;
}
.body{
    color: black;
}
.item{
    color: blue;
}

Если заменить инструкцию <xsl:apply-templates select="//item" /> на цикл <xsl:for-each select="//item">... </xsl:for-each>, то стили не пропадают.

Автор: diadiavova 6.5.2013, 19:56

ИЕ9 у меня нет, в ИЕ10 отображается нормально, а в хроме вообще чистая страница. Проблему хрома решить не удалось, но в файрфоксе она решается путем правильной установки метода вывода

Код


<xsl:output
        media-type="text/html" method="html"

Когда ты ставишь xml, то вывод может не соответствовать формату. Взгляни, например, что выдает файрфокс, если сделать как сделал ты.

Код


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>test</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="layout">
        <div class="title">Числа</div>
        <div class="body">
            <div class="item"><b>Один</b><br></br>
            </div>
            <div class="item"><b>Два</b><br></br>
            </div>
            <div class="item"><b>Три</b><br></br>
            </div>
        </div>
    </div>
</body>
</html>

Обрати внимание на то, как выводится элемент br

Автор: JRoma 7.5.2013, 05:33

Действительно, замена метода вывода с xml на html решила проблему.

Код


    <xsl:output
        media-type="text/html" method="html" encoding="utf-8"
        omit-xml-declaration="yes"
        doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
    />

Chrome работает с локальными файлами только если запускать с ключом chrome.exe --allow-file-access-from-files

Элемент , только показывается как в инспекторе Fierfox, на деле это не приводит к двойному переводу строки. В Chrome показывает как , а в Opera .

Спасибо за ответ.

Автор: diadiavova 7.5.2013, 11:05

Цитата(JRoma @ 7.5.2013, 06:33

)

Элемент , только показывается как в инспекторе Fierfox, на деле это не приводит к двойному переводу строки.

Это приводит к ошибке, из-за которой и появляется указанная проблема.

Цитата(JRoma @ 7.5.2013, 06:33

)

В Chrome показывает как , а в Opera .

Тут следует заметить, что с точки зрения xml записи и - эквивалентны, поэтому разные xslt-процессоры могут выводить пустые элементы по-разному и это не ошибка в случае метода вывода xml. Именно поэтому одни браузеры показывали содержимое правильно, а другие - нет. А хром после исправления вывел бр без закрывающего слеша из-за того, что в хтмл так надо делать. Проблема возникает из-за того, что в первой версии xslt нет встроенной поддержки метода вывода xhtm(а вторая не поддерживается браузерами) со всеми особенностями этого формата. В этом смысле лучше было бы вообще отказаться от использования xhtml в качестве выходного формата, поскольку неизвестно к каким еще неприятностям это может привести.

Автор: JRoma 8.5.2013, 10:36

Спасибо за совет. Буду копать в сторону отказа от xhtml. Пока мой уровень знаний не позволяет это сделать.

Автор: diadiavova 8.5.2013, 11:54

Цитата(JRoma @ 8.5.2013, 11:36

)

Буду копать в сторону отказа от xhtml. Пока мой уровень знаний не позволяет это сделать.

Поставь доктайп хтмловский и убери пространство имен из элемента html.

Автор: JRoma 8.5.2013, 14:13

Получилось! smile

Убрал пространство имен из тега html и заменил вывод доктайпа:

Код


    <xsl:output method="html"
      encoding="UTF-8"
      indent="yes"
      doctype-system="about:legacy-compat"/>

Раньше я убирал доктайп совсем (это было зря), и у меня пропадали тени в IE. Сейчас всё работает вот с такими стилями

Код


.title{
    overflow: hidden;
    width: 100%;    
    
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;    
    
    background-image: -moz-linear-gradient(top, #79A8C5, #013278);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#79A8C5), to(#013278), color-stop(1,#013278));
    background-image: -ms-linear-gradient(#79A8C5, #013278);
    background-image: -o-linear-gradient(#79A8C5, #013278);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#79A8C5,endColorstr=#013278,GradientType=0);        

    -webkit-box-shadow: 0px 10px 5px -6px rgba(0,0,0,0.6); 
    -moz-box-shadow: 0px 10px 5px -6px rgba(0,0,0,0.6); 
    box-shadow: 0px 10px 5px -6px rgba(0,0,0,0.6); 
    
    margin: 0px 0px 10px;
}