Я оформляю XML с помощью CSS, на Firefox Я получаю желаемый макет, но на chrome часть стиля не работает должным образом.
Кто-нибудь может сказать мне, что я делаю не так?
Я оформляю тег с помощью display: table-row и: before с содержимым: attr () display: table-cell
Почему chrome не понимает строку таблицы ?
Firefox:
Chrome:
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;
}