用于 XML 的 CSS 在 Google Chrome 上无法正常工作答案

【问题标题】：CSS for XML not working as expected on Google Chrome用于 XML 的 CSS 在 Google Chrome 上无法正常工作
【发布时间】：2020-04-13 23:42:51
【问题描述】：

我正在使用 CSS 设置 XML 样式，在 Firefox 上我得到了所需的布局，但在 chrome 上，样式的一部分没有按预期工作。

谁能告诉我我做错了什么？

我使用 display: table-row 和 :before 设置标签的样式：attr() display:table-cell

为什么 chrome 不理解 table-row？

火狐：

铬：

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;
}

【问题讨论】：

标签： css xml google-chrome

【解决方案1】：

Chrome 和 Android 浏览器似乎无法解析 XML 上的类选择器，例如：group.ver、group.hor

将标签名称更改为 group-ver，group-hor 解决了问题

【讨论】：