CSS для XML не работает должным образом в Google Chrome - PullRequest
0 голосов
/ 08 апреля 2020

Я оформляю XML с помощью CSS, на Firefox Я получаю желаемый макет, но на chrome часть стиля не работает должным образом.

Кто-нибудь может сказать мне, что я делаю не так?

Я оформляю тег с помощью display: table-row и: before с содержимым: attr () display: table-cell

Почему chrome не понимает строку таблицы ?

Firefox: enter image description here

Chrome: enter image description here

XML

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/css" href="../../css/xml.css"?>
<xmlresponse>
<group label="Ficha do Local" class="ver">
<data>
<obj>LOCAL</obj>
<id>2040</id>
<text><![CDATA[QUEIMADOS CHEFIA ENFERMAGEM]]></text>
<id_cliente><![CDATA[4]]></id_cliente>
<id_unidade><![CDATA[487]]></id_unidade>
<unidade label="Unidade"><![CDATA[HOSPITAL MUNICIPAL DR CARMINO CARICCHIO]]></unidade>
<setor label="Setor"><![CDATA[9ºANDAR.]]></setor>
<nome label="Local"><![CDATA[QUEIMADOS CHEFIA ENFERMAGEM]]></nome>
<ck_vital><![CDATA[0]]></ck_vital>
<ck_enc><![CDATA[0]]></ck_enc>
</data>
</group>
<group label="Últimas intervenções" class="hor">
<res_hist>
<dt label="Data"><![CDATA[27/08/2013]]></dt>
<codigo label="Código"><![CDATA[04503/13]]></codigo>
<op label="Atividade"><![CDATA[CONSERTO DE FECHADURA DO ARMÁRIO SALA CHEFIA ENFERMAGEM.]]></op>
</res_hist>
<res_hist>
<dt label="Data"><![CDATA[23/05/2013]]></dt>
<codigo label="Código"><![CDATA[02396/13]]></codigo>
<op label="Atividade"><![CDATA[COLOCAÇÃO DE TRANCA EM ARMARIO ]]></op>
</res_hist>
<res_hist>
<dt label="Data"><![CDATA[05/04/2013]]></dt>
<codigo label="Código"><![CDATA[01630/13]]></codigo>
<op label="Atividade"><![CDATA[CADEIRA DE BANHO SEM ASSENTO PATRIMONIO - 028426]]></op>
</res_hist>
<res_hist>
<dt label="Data"><![CDATA[20/08/2012]]></dt>
<codigo label="Código"><![CDATA[05264/12]]></codigo>
<op label="Atividade"><![CDATA[SOLICITO A COLOCAÇÃO DO QUADRO.]]></op>
</res_hist>
<res_hist>
<dt label="Data"><![CDATA[16/08/2012]]></dt>
<codigo label="Código"><![CDATA[04946/12]]></codigo>
<op label="Atividade"><![CDATA[DESENTUPIR A PIA DO BANHEIRO]]></op>
</res_hist>
</group>
</xmlresponse>

CSS

xmlresponse {
    background-color: #ddd; 
    margin: 20px;
    margin-top: 140px;
    font-family: Arial;
    font-size: 10pt;
}
group {
    border-radius: 20px;
    border-collapse: collapse;
    border: 1px solid white;
    display: block;
    padding: 20px;
    margin: 10px 0;
}
group:before {
    content: attr(label);
    display: block;
    font-weight: bold;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin: -10px -10px 10px -10px;
}
group.ver > * {
    display: block;
    width: 100%; 
}
group.ver > * > * {
    display: table-row;
    padding: 10px;
    color: black;
} 
group.ver > * > *:before {
    content: attr(label);
    display: table-cell;
    padding-right: 10px;
    font-weight: bold;
}
group.ver > * > *:not([label]) {
    display: none;
} 
group.hor > * {
    display: table-row;
    width: 100%;
}
group.hor > * > * { 
    display: table-cell;
}
group.hor > * > *:not(:last-child) { 
    padding-right: 10px;
}
group.hor > *:first-of-type > *[label]:before {
    content: attr(label);
    display: block;
    font-weight: bold;
}
debug label {
    font-weight: bold;
}
debug msg { 
    white-space: pre;
}

1 Ответ

0 голосов
/ 13 апреля 2020

Похоже, Chrome и Android браузер не анализирует селектор класса на XML, например: group.ver, group.hor

Изменение имени тега на group-ver, group-hor решено проблема

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