1
本HTML和CSS如下：页脚和非应用CSS查询
/* START footer CSS */
footer {
position: relative;
border-top: solid 1px rgba(255,255,255,.2);
}
/* Footernav-wrapper CSS ---------------------*/
#WebsiteFooterNav.Footernav-wrapper {
display: flex;
max-width: 1170px;
flex-direction: column;
padding: 20px 0;
background-color: #000;
margin: 0 auto;
}
/* END Footernav-wrapper CSS ---------------------*/
/* Footernav-svg-icons CSS ---------------------*/
#WebsiteFooterNav .Footernav-svg-icons {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
/* END Footernav-svg-icons CSS ---------------------*/
/* Footernav CSS ---------------------*/
#WebsiteFooterNav .Footernav {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
/* END Footernav CSS ---------------------*/
/* Footernav-products CSS ---------------------*/
#WebsiteFooterNav .Footernav-menu+.Footernav-products {
margin-top: 20px;
border-top-width: 1px;
}
#WebsiteFooterNav.Footernav-wrapper ul {
list-style: none;
}
#WebsiteFooterNav .Footernav-products {
display: flex;
min-height: 60px;
margin: 20px;
padding: 10px 0;
border-style: solid;
border-color: #333;
border-width: 1px 0;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
/* END Footernav-products CSS ---------------------*/
/* Footernav-product CSS ---------------------*/
#WebsiteFooterNav .Footernav-product {
padding: 10px;
/* END Footernav-product CSS ---------------------*/
/* Footernav-product-link CSS ---------------------*/
#WebsiteFooterNav .Footernav-wrapper a {
text-decoration: none;
}
#WebsiteFooterNav .Footernav-product-link {
display: flex;
align-items: center;
color: #999;
fill: #999;
font-size: 12px;
transition: color .1s ease,fill .1s ease;
}
#WebsiteFooterNav .Footernav-product-link:hover {
color: #fff;
fill: #fff;
}
/* END Footernav-product-link CSS ---------------------*/
/* Footernav-product-icon CSS ---------------------*/
#WebsiteFooterNav .Footernav-product-icon {
width: 20px;
height: 20px;
margin: 0 7px;
}
/* END Footernav-product-icon CSS ---------------------*/
/* Footernav-product-icon svg CSS ---------------------*/
#WebsiteFooterNav .Footernav-product-icon svg {
max-width: 100%;
max-height: 100%;
display: block;
fill: inherit;
}
/* END Footernav-product-icon svg CSS ---------------------*/
/* END Footernav-product-icon svg CSS ---------------------*/
/* Footernav-product-name CSS ---------------------*/
#WebsiteFooterNav .Footernav-product-name {
display: flex;
align-items: center;
color: #999;
fill: #999;
font-size: 13px;
transition: color .1s ease,fill .1s ease;
}
#WebsiteFooterNav .Footernav-product-name:hover {
color: #fff;
fill: #fff;
}
/* END Footernav-product-name CSS ---------------------*/
/* Footernav-misc CSS ---------------------*/
#WebsiteFooterNav .Footernav-misc {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
/* END Footernav-misc CSS ---------------------*/
/* Footernav-region CSS ---------------------*/
#WebsiteFooterNav.Footernav-wrapper a{
text-decoration: none;
}
#WebsiteFooterNav .Footernav-region {
padding: 5px 20px 0 0;
display: flex;
align-items: center;
color: #999;
fill: #999;
font-size: 11px;
line-height: 1;
transition: color .1s ease,fill .1s ease;
cursor: pointer;
overflow: hidden;
}
/* END Footernav-region CSS ---------------------*/
/* Footernav-region-icon CSS ---------------------*/
#WebsiteFooterNav .Footernav-region-icon {
width: 20px;
height: 20px;
margin-right: 10px;
}
/* END Footernav-region-icon CSS ---------------------*/
/* Footernav-region-icon svg CSS ---------------------*/
#WebsiteFooterNav .Footernav-region-icon svg {
width: 100%;
height: 100%;
display: block;
fill: inherit;
}
/* END Footernav-region-icon svg CSS ---------------------*/
/* Footernav-disclaimers CSS ---------------------*/
#WebsiteFooterNav.Footernav-wrapper ul {
list-style: none;
}
#WebsiteFooterNav .Footernav-disclaimers {
padding: 5px 0;
margin: 0;
display: flex;
flex-wrap: wrap;
font-size: 11px;
color: #999;
}
/* Footernav-disclaimer CSS ---------------------*/
#WebsiteFooterNav .Footernav-disclaimer {
padding: 5px 0;
color: inherit;
}
/* END Footernav-disclaimer CSS ---------------------*/
/* Footernav-disclaimer:after CSS ---------------------*/
#WebsiteFooterNav .Footernav-disclaimer:after {
margin: 0 8px;
content: '/';
}
/* END Footernav-disclaimer:after CSS ---------------------*/
/* Footernav-disclaimer:nth-last-child CSS ---------------------*/
#WebsiteFooterNav .Footernav-disclaimers .Footernav-disclaimer:nth-last-child(2):after {
display: none;
}
/* END Footernav-disclaimer:nth-last-child CSS ---------------------*/
/* Footernav-disclaimer-link CSS ---------------------*/
#WebsiteFooterNav .Footernav-disclaimer-link {
color: inherit;
transition: color .1s ease,fill .1s ease;
}
/* END Footernav-disclaimer-link CSS ---------------------*/
/* END footer CSS */<!-- START footer HTML -->
<div>
<footer id="WebsiteFooterNav" class="Footernav-wrapper">
<svg class="Footernav-svg-icons" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="Footernav-icon-github">
<path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
<path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
<path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
</g>
<g id="Footernav-icon-archive">
<path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
<path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
<path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
</g>
<g id="Footernav-icon-music">
<path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
<path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
<path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
</g>
<g id="Footernav-icon-download">
<path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
<path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
<path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
</g>
<g id="Footernav-icon-language">
<path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/>
<path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/>
<path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/>
</g>
</defs>
</svg>
<div class="Footernav">
<ul class="Footernav-products">
<li class="Footernav-product" id="xxxxxxxx">
<a href="LINK HERE" class="Footernav-product-link">
<span class="Footernav-product-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
<use xlink:href="#Footernav-icon-github"></use>
</svg>
</span>
<span class="Footernav-product-name">Product 1</span>
</a>
</li>
<li class="Footernav-product" id="xxxxxxxx">
<a href="LINK HERE" class="Footernav-product-link">
<span class="Footernav-product-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
<use xlink:href="#Footernav-icon-archive"></use>
</svg>
</span>
<span class="Footernav-product-name">Product 2</span>
</a>
</li>
<li class="Footernav-product" id="xxxxxxxx">
<a href="LINK HERE" class="Footernav-product-link">
<span class="Footernav-product-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
<use xlink:href="#Footernav-icon-music"></use>
</svg>
</span>
<span class="Footernav-product-name">Product 3</span>
</a>
</li>
<li class="Footernav-product" id="xxxxxxxx">
<a href="LINK HERE" class="Footernav-product-link">
<span class="Footernav-product-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false">
<use xlink:href="#Footernav-icon-download"></use>
</svg>
</span>
<span class="Footernav-product-name">Product 4</span>
</a>
</li>
</ul>
<!-- if "is-small" is set on page config, return only Footernav-misc-->
<div class="Footernav-misc">
<a href="#" class="Footernav-region">
<div class="Footernav-region-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" focusable="false">
<use xlink:href="#Footernav-icon-language"></use>
</svg>
</div>
<div class="Footernav-region-text">Change Language</div>
</a>
<ul class="Footernav-disclaimers">
<li class="Footernav-disclaimer">Copyright © 2017 -websitename-. All rights reserved.
</li>
<li class="Footernav-disclaimer" id="Globalnav.copyright.Privacy">
<a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Privacy</a>
</li>
<li class="Footernav-disclaimer" id="Globalnav.copyright.Terms_of_Use">
<a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Terms of Use</a>
</li>
<li class="Footernav-disclaimer" id="Globalnav.copyright.Cookies">
<a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Cookies</a>
</li>
</ul>
</div>
</div>
</footer>
</div>目标样机https://i.stack.imgur.com/tJhbk.png（导航栏已被删节）
- “产品“链接内联SVG不符合其指定的 20px边界尺寸
- 有关“产品” 链接和相关样式css的继承问题。
- 不正确的语言SVG大小
#WebsiteFooterNav .Footernav-product-link {}并在不应用CSS是其中的问题在于我相信，但不知道为的原因。
如果另一个海报可能会提供一些线索
如果您将示例代码修剪到重现问题所需的绝对最小值，这将有所帮助。 –
@李先生修剪过。 – 109881