xslt：css在html页面中不起作用答案

【问题标题】：xslt: css not wotking in html pagexslt：css在html页面中不起作用
【发布时间】：2019-09-14 18:03:15
【问题描述】：

在 spring 项目中，我使用 XsltViewResolver 将 xml 转换为 html org.springframework.web.servlet.view.xslt.XsltViewResolver

在 html 输出代码中 css 不起作用。
XML 字符串：

<?xml version="1.0"?>
<kblc:kblcImportLc xmlns:kblc='http://www.kblc.com/schema/v1/kblc'>
    <kblc:ImportStructureLC>
        <kblc:ImportLCHeader>
            <kblc:ApplicantInfo>
                <kblc:ApplicantName>ApplicantTest</kblc:ApplicantName>
                <kblc:ApplicantAddress>Spring Villa Park</kblc:ApplicantAddress>
                <kblc:ApplicantCity>London</kblc:ApplicantCity>
                <kblc:ApplicantPostalCode>HA8 7EB</kblc:ApplicantPostalCode>
                <kblc:ApplicantCountry>UK</kblc:ApplicantCountry>
                <kblc:ApplicantRegion>consistent</kblc:ApplicantRegion>
                <kblc:ApplicantContactName>AA</kblc:ApplicantContactName>
                <kblc:ApplicantEmail>email@mail.com</kblc:ApplicantEmail>
                <kblc:ApplicantPhone>5856965456</kblc:ApplicantPhone>
                <kblc:ApplicantFax>021548795</kblc:ApplicantFax>
            </kblc:ApplicantInfo>
        </kblc:ImportLCHeader>
    </kblc:ImportStructureLC>
</kblc:kblcImportLc>

XSL 文件：

<?xml version="1.0"?>
<xsl:stylesheet version="2.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:kblc="http://www.kblc.com/schema/v1/kblc">
    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <html>
            <head>
                <title>Sports Info</title>
                <style>
                    .HelpTitle {
                    font: 13px verdana, sans-serif;
                    font-weight: bold;
                    text-decoration: underline;
                    margin-left: 5px;
                    margin-right: 5px;
                    }
                    .HelpText {
                    font: 11px verdana, sans-serif;
                    margin-left: 5px;
                    margin-right: 5px;
                    }
                    .HelpHighlight {
                    background-color: #55be28 ;
                    }
                </style>
                <script language="javascript" type="text/javascript">
                    function init () {
                    var url = new URL(document.location);
                    var str2 = url.searchParams.get("tagName");

                    document.getElementById(str2).className = "HelpHighlight";
                    document.getElementById("ErrorString").value="someContent";
                    document.getElementById("ErrorString123").value=str2;
                    document.getElementById(str2).focus();
                    }
                </script>
            </head>
            <body onload="init();">
                <xsl:apply-templates/>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="kblc:kblcImportLc/kblc:ImportStructureLC">
        <!-- Start ApplicantName -->
        <div id="ApplicantName">
            <br/>
            <div class="HelpTitle">ApplicantName</div>
            <br/>
            <div class="HelpText">
                <xsl:value-of select="kblc:ImportLCHeader/kblc:ApplicantInfo/kblc:ApplicantName" />
            </div>
            <div id="ErrorString123"></div>
            <br/>
        </div>
        <!-- End ApplicantName -->


        <!-- Start ApplicantAddress -->
        <div id="ApplicantAddress">
            <br/>
            <div class="HelpTitle">ApplicantAddress</div>
            <br/>
            <div class="HelpText">
                <xsl:value-of select="kblc:ImportLCHeader/kblc:ApplicantInfo/kblc:ApplicantAddress" />
            </div>
            <div id="ErrorString"></div>
            <br/>
        </div>
        <!-- End ApplicantAddress -->

    </xsl:template>
</xsl:stylesheet>

HTML 输出：

<html xmlns:kblc="http://www.kblc.com/schema/v1/kblc">
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sports Info</title>
    <style>
                    .HelpTitle {
                    font: 13px verdana, sans-serif;
                    font-weight: bold;
                    text-decoration: underline;
                    margin-left: 5px;
                    margin-right: 5px;
                    }
                    .HelpText {
                    font: 11px verdana, sans-serif;
                    margin-left: 5px;
                    margin-right: 5px;
                    }
                    .HelpHighlight {
                    background-color: #55be28 ;
                    }
                </style>
    <script type="text/javascript" language="javascript">
                    function init () {
                    var url = new URL(document.location);
                    var str2 = url.searchParams.get("tagName");

                    document.getElementById(str2).className = "HelpHighlight";
                    document.getElementById("ErrorString").value="someContent";
                    document.getElementById("ErrorString123").value=str2;
                    document.getElementById(str2).focus();
                    }
                </script>
  </head>
  <body onload="init();">

    <div id="ApplicantName">
      <br>
      <div class="HelpTitle">ApplicantName</div>
      <br>
      <div class="HelpText">ApplicantTest</div>
      <div id="ErrorString123"></div>
      <br>
    </div>
    <div id="ApplicantAddress">
      <br>
      <div class="HelpTitle">ApplicantAddress</div>
      <br>
      <div class="HelpText">Spring Villa Park</div>
      <div id="ErrorString"></div>
      <br>
    </div>


  </body>
</html>

在这个 html css 中不起作用。

【问题讨论】：

在什么方面不起作用？如果我将生成的 HTML 粘贴到 .html 文件中，那么它在本地可以正常工作。
你想在 JavaScript 中做什么？将value 提供给<div> 不会做任何事情。你确定你有正确的tagName 参数吗？（这是区分大小写的。）您使用的是什么浏览器？ url.searchParams 在 IE11 中没有实现。
@MrLister 是的，当我们通过另存为 .html 文件手动打开此 html 代码时，css 正在工作......但随后它由 java 代码（Spring mvc）打开 css 不工作......跨度>
@MrLister html 标记有名称空间这是因为 css 不工作吗？ <html xmlns:kblc="http://www.kblc.com/schema/v1/kblc">

标签： html css spring-mvc xslt

【解决方案1】：

来自 cmets

html 标签有命名空间，这是因为 css 不工作吗？

不应该是这样的。但是如果你不想在 HTML 文档中输出那个奇怪的命名空间声明，那么在 xsl:stylesheet 元素中使用 exclude-result-prefixes atribute：

<xsl:stylesheet version="2.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:kblc="http://www.kblc.com/schema/v1/kblc"
                exclude-result-prefixes="kblc">

【讨论】：