程序员经验分享-hwhale

Internet Explorer 无法识别 SVG 元素的 CSS

2024-02-29

我有一个 SVG 图像地图，链接上带有悬停样式。

（有关 SVG 图像映射的更多信息here http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG.)

我测试过的所有受人尊敬的浏览器都可以正确显示它。

IE 没有任何（惊讶！）...

(I'm only concerned with IE11, not super-archaic versions.)

谢谢这个类似问题的答案 https://stackoverflow.com/a/29779169/2454914，我知道 IE 可以显示剪切路径，只要它们是 SVG 标记的一部分并且未添加 CSS 样式即可。

就我而言，由于它是图像映射，因此剪切路径位于锚标记内。也许这就是 IE 感到困惑的原因，但我没有在任何地方读到它不被支持。

这是我所拥有的（已确认在 Firefox、Chrome、Safari、Opera 中工作）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; margin: auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
	<defs>
		<filter id="desaturate">
			<feColorMatrix 
				type='matrix' 
				values="0 1 0 0 0
						0 1 0 0 0
						0 1 0 0 0
						0 1 0 1 0 "
			/>
		</filter>
		
		<style type="text/css">
			a:link,
			a:visited {
				opacity: 0;
			}
			a:hover,
			a:active {
				opacity: 1;
				transition-property: opacity;
				transition-duration: 0.4s;
				transition-timing-function: ease-in-out;
			}
			
			.desaturated {
				filter:url("#desaturate");
			}
		</style>
		
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>

	<a xlink:href="">
		<g id="_1-2" data-name="1">
			<g clip-path="url(#clip-path)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_2-2" data-name="2">
			<g clip-path="url(#clip-path-2)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_3-2" data-name="3">
			<g clip-path="url(#clip-path-3)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_4-2" data-name="4">
			<g clip-path="url(#clip-path-4)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_5-2" data-name="5">
			<g clip-path="url(#clip-path-5)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_6-2" data-name="6">
			<g clip-path="url(#clip-path-6)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_7-2" data-name="7">
			<g clip-path="url(#clip-path-7)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_8-2" data-name="8">
			<g clip-path="url(#clip-path-8)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_9-2" data-name="9">
			<g clip-path="url(#clip-path-9)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_10-2" data-name="10">
			<g clip-path="url(#clip-path-10)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_11-2" data-name="11">
			<g clip-path="url(#clip-path-11)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
	<a xlink:href="">
		<g id="_12-2" data-name="12">
			<g clip-path="url(#clip-path-12)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"></image>
			</g>
		</g>
	</a>
</svg>
</div>
</body>
</html>

如果您在上述非 IE 浏览器中运行代码片段，您应该会看到鼠标悬停时出现铅笔的颜色。

Image credit: Pixabay https://pixabay.com/photos/colored-pencils-paint-heart-school-4031668/

可以采取不同的措施让 IE 识别剪辑路径链接吗？

Update:

我已经取得了一些进步。我有一个在 IE11 中工作的单独测试文件！

现在我只需要弄清楚造成它和破坏它的区别是什么。

下面是一个代码片段(1)多边形路径，(2)作为链接的多边形路径，以及(3)作为链接的多边形剪辑路径：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 512px; height: 512px; margin: 20px auto;">
<svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
	<defs>
		<clipPath id="clip-path">
			<polygon id="hexa3" points="316 256 196 256 136 360 196 464 316 464 376 360 316 256" fill="none"/>
		</clipPath>
	</defs>
	<rect id="bg" width="512" height="512" fill="#b9b8c1"/>
	<a xlink:href="#">
		<g id="clip_group">
			<g clip-path="url(#clip-path)">
				<image id="img" width="960" height="640" transform="translate(24 204) scale(0.48 0.48)" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="hexa2">
			<polygon points="436 48 316 48 256 152 316 256 436 256 496 152 436 48" fill="#c4fffb"/>
		</g>
	</a>
	<g id="hexa1">
		<polygon points="196 48 76 48 16 152 76 256 196 256 256 152 196 48" fill="#eaffaf"/>
	</g>
</svg>
</div>
</body>
</html>

Update 2

我已将问题范围缩小到 IE 不喜欢我的 CSS。

这是一个片段，其中剪辑路径上的链接正常工作，但 CSS 被注释掉。一旦 CSS 重新启用，它就会崩溃。 （为了简单起见，背景图像已被删除。）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 320px; margin: 20px auto;">
<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">
	<defs>
		<!-- <style type="text/css">
			a:link,
			a:visited {
				opacity: 0;
			}
			a:hover,
			a:active {
				opacity: 1;
				transition-property: opacity;
				transition-duration: 0.4s;
				transition-timing-function: ease-in-out;
			}
		</style> -->
		
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<!-- <use id="bw_img" xlink:href="#image"/> -->

	<a xlink:href="#">
		<g id="clip_1">
			<g clip-path="url(#clip-path)">
				<use id="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_2">
			<g clip-path="url(#clip-path-2)">
				<use id="color_img-2" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_3">
			<g clip-path="url(#clip-path-3)">
				<use id="color_img-3" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_4">
			<g clip-path="url(#clip-path-4)">
				<use id="color_img-4" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_5">
			<g clip-path="url(#clip-path-5)">
				<use id="color_img-5" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_6">
			<g clip-path="url(#clip-path-6)">
				<use id="color_img-6" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_7">
			<g clip-path="url(#clip-path-7)">
				<use id="color_img-7" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_8">
			<g clip-path="url(#clip-path-8)">
				<use id="color_img-8" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_9">
			<g clip-path="url(#clip-path-9)">
				<use id="color_img-9" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_10">
			<g clip-path="url(#clip-path-10)">
				<use id="color_img-10" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_11">
			<g clip-path="url(#clip-path-11)">
				<use id="color_img-11" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
	<a xlink:href="#">
		<g id="clip_12">
			<g clip-path="url(#clip-path-12)">
				<use id="color_img-12" data-name="color_img" xlink:href="#image"/>
			</g>
		</g>
	</a>
</svg>
</div>
</body>
</html>

所以现在我想知道是否可能是因为where我已经放置了CSS，或者也许某些种类当在 SVG 中时，IE 无法识别 CSS 的内容。测试仍在继续...

此时我认为将这个问题的标题从

让 Internet Explorer 识别 SVG 中的剪辑路径链接

to

Internet Explorer 无法识别 SVG 元素的 CSS

此外，IE 显然具有“完整的基本支持”<style>代替<svg>从版本 9 开始，根据这一页 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style。所以我真的很想知道它讨厌什么my CSS. a:hover不是一个特别奇特的选择器......

Adding /* <![CDATA[ */（如该示例所示）也没有解决问题。

这是两个 CSS 的例子:hover在 IE11 中工作的实现：

  1. Stack Overflow：SVG CSS 悬停样式 https://stackoverflow.com/questions/40694441/svg-css-hover-styling
  2. CodePen：CSS SVG 悬停颜色 https://codepen.io/luiscarvalho/pen/hJFrx*

*CodePen doesn't support IE, but that hover styling works if prepared in an HTML file.


The answer is...

对于 SVG 中的不透明度过渡，IE 需要大于零的不透明度！

a.hover_area:link, a.hover_area:visited {opacity: 0.001}

否则它就会把它扔掉，就像“heyyyyy，不需要这个看不见的东西！”尽管被告知要期待过渡：transition-property: opacity;

Here's a snippet, working in IE11:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<div style="width: 480px; height: 640px; margin: 20px auto;"> <!-- IE needs width AND height specified to scale the SVG inside correctly. -->

<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 640">

	<filter id="desaturate">
		<feColorMatrix 
			type='matrix' 
			values="0 1 0 0 0
					0 1 0 0 0
					0 1 0 0 0
					0 1 0 1 0 "
		/>
	</filter>
	
	<style type="text/css">
		/* <![CDATA[ */
		a.hover_area:link,
		a.hover_area:visited {
			opacity: 0.001; /* Must be greater than 0 for IE! */
		}
		a.hover_area:hover,
		a.hover_area:active {
			opacity: 1;
			transition-property: opacity;
			transition-duration: 0.4s;
			transition-timing-function: ease-in-out;
		}
		
		.desaturated {
			filter:url("#desaturate");
		}
		/* ]]> */
	</style>

	<defs>
		<clipPath id="clip-path">
			<polygon id="_1" data-name="1" points="514 303 495 298 573 72 639 -25 796 -25 679 149 514 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-2">
			<polygon id="_2" data-name="2" points="518 320 518 303 679 149 980 -11 980 139 738 269 518 320" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-3">
			<polygon id="_3" data-name="3" points="509 333 538 349 729 400 997 405 997 280 738 269 509 333" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-4">
			<polygon id="_4" data-name="4" points="500 357 675 512 938 654 980 654 980 527 729 400 518 344 500 357" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-5">
			<polygon id="_5" data-name="5" points="762 662 681 528 509 365 495 371 571 603 609 668 762 662" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-6">
			<polygon id="_6" data-name="6" points="538 661 543 583 500 386 490 353 480 353 409 580 409 661 538 661" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-7">
			<polygon id="_7" data-name="7" points="189 654 298 492 456 353 470 353 476 365 397 580 343 661 189 654" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-8">
			<polygon id="_8" data-name="8" points="-17 608 266 493 456 353 435 344 227 371 -24 465 -17 608" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-9">
			<polygon id="_9" data-name="9" points="-10 365 227 371 466 325 216 240 -24 225 -10 365" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-10">
			<polygon id="_10" data-name="10" points="456 303 295 120 78 -25 -24 -25 -24 68 221 230 443 310 456 303" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-11">
			<polygon id="_11" data-name="11" points="312 127 233 -25 385 -25 436 85 480 292 476 303 456 303 312 127" fill="none"/>
		</clipPath>
		<clipPath id="clip-path-12">
			<polygon id="_12" data-name="12" points="480 293 496 299 565 69 565 -21 436 -17 436 75 480 293" fill="none"/>
		</clipPath>
		<image id="image" width="960" height="640" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
	</defs>

	<image id="bw_img" class="desaturated" width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>

	<a xlink:href="#" class="hover_area">
		<g id="_1-2" data-name="1">
			<g clip-path="url(#clip-path)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_2-2" data-name="2">
			<g clip-path="url(#clip-path-2)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_3-2" data-name="3">
			<g clip-path="url(#clip-path-3)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_4-2" data-name="4">
			<g clip-path="url(#clip-path-4)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_5-2" data-name="5">
			<g clip-path="url(#clip-path-5)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_6-2" data-name="6">
			<g clip-path="url(#clip-path-6)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_7-2" data-name="7">
			<g clip-path="url(#clip-path-7)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_8-2" data-name="8">
			<g clip-path="url(#clip-path-8)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_9-2" data-name="9">
			<g clip-path="url(#clip-path-9)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_10-2" data-name="10">
			<g clip-path="url(#clip-path-10)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_11-2" data-name="11">
			<g clip-path="url(#clip-path-11)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
	<a xlink:href="#" class="hover_area">
		<g id="_12-2" data-name="12">
			<g clip-path="url(#clip-path-12)">
				<image width="960" height="640" xlink:href="https://i.stack.imgur.com/IacTT.jpg"/>
			</g>
		</g>
	</a>
</svg>

</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

csstransitions

internetexplorer11

imagemap

Internet Explorer 无法识别 SVG 元素的 CSS 的相关文章

  • 使用 CSS 屏蔽图像

    我做了这样的设计 如何用CSS遮盖背景 我试过这样的代码 img poster display block max width 100 webkit mask image url https cdn pbrd co images GYiCo

  • 是否可以使materialize.css模态更大并删除垂直滚动条？

    我刚刚创建了按钮 单击后会弹出一个模式 每个按钮都有一个显示不同练习 gif 的模式 然而 模态框太小 导致用户无法看到整个 gif 迫使他们向下滚动 我想删除滚动条并使模态更大 以便用户可以看到整个 gif 任何帮助都会很棒 这是我的代码

  • 如何阅读 CSS 中的 !important ？ [复制]

    这个问题在这里已经有答案了 CSS属性属性是怎样的 important read Is it really important exclamation mark important Answer 从下面的答案来看 似乎很简单importan

  • 将 SVG 路径转换为绝对命令

    给定一个 SVG Path 元素 如何将所有路径命令转换为绝对坐标 例如 转换此路径

  • 有什么方法可以让 css 选择除第一页之外的所有内容吗？

    我刚刚找到了 CSS page指令 并将其与 first将 CSS 应用到 html 打印的第一页 有没有办法反其道而行之 将 CSS 应用于所有页面except首先 使用 CSS3 not https developer mozilla

  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL

  • CSS 选择器嵌套

    是否可以在选择器中嵌套选择器 我有很多类似这样的样式 header h1 header img header form 我想压缩它们 使它们看起来像这样 header h1 img form 以提高可读性 这在普通的旧 CSS 中可能吗 不

  • 悬停 CSS 仅适用于 Chrome

    嘿 我正在尝试使用 CSS 悬停类 它在 Chrome 上运行良好 但在 Firefox 上运行不佳 任何帮助表示赞赏 这是我的 CSS albumbox labeltext visibility hidden albumbox hover

  • 在“onClick”上切换 DIV 高度

    我想切换分区的高度 我尝试过将 animate 与 if else 语句一起使用 但它只会反弹 我现在使用的代码将隐藏我的分区而不是切换高度 点击时会触发 document ready function content1 toggle fu

  • 删除下拉链接并在导航栏菜单中显示其所有项目

    我正在使用 Twitter Bootstrap 及其响应式设计来实现顶部典型的 Twitter Bootstrap 导航栏菜单 在那里我有一些链接和一个下拉菜单 当我将浏览器大小调整为768px或者更少 它会转变为一种新的导航菜单 这一切开

  • 表单 CSS：根据选中/未选中状态设置单选框的父级（标签）样式

    所以我有一个表格 表格中提出的大多数问题都是使用无线电输入 我要和

  • 从后面的代码添加外部 css 文件

    我有一个 CSS 文件 例如 SomeStyle css 我是否可以将此样式表文档从其代码隐藏应用到 aspx 页面 您可以将文字控件添加到标头控件中 Page Header Controls Add new System Web UI L

  • 在分词前添加连字符

    也许这是不可能的 但我想知道是否有一种方法可以在打破单词之前自动在长字符串的末尾插入一个连字符 并且没有空格 这jsfiddle http jsfiddle net 76qBy 演示了我遇到的问题 谢谢 table width 200px

  • 仅适用于 Firefox 的不同字体大小

    我只是为我的网站添加一个帐户标题 仅显示玩家的用户名 我正在使用自定义字体 它在 Chrome 和 IE 上运行良好 但是对于 Firefox 它不显示自定义字体 只显示下一个可用字体 即 Verdana 我不介意 但我的问题是 Verda

  • h1、h2、h3.. 元素吃掉 div 边距

    为什么 h1 h2 h3 元素在 div 中的边距会被忽略 http jsfiddle net TzmdZ http jsfiddle net TzmdZ div class col h3 This is header h3 div div

  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett

  • 使用 CSS 等高列

    我想对我的 CSS 表使用百分比 不幸的是 它对我不起作用 这段代码有什么问题 我应该使用 flexbox 而不是 table 吗 我想使用表格 因为我想要相同高度的列 ul list style none margin 0 display

  • CSS3 属性 webkit-overflow-scrolling:touch 错误

    iOS 5 发布了网页设计师的新属性 webkit overflow scrolling touch它使用 iOS 设备硬件加速器为可滚动 div 提供本机滚动 当在我们的开发网站上实施时 它确实有效 但效果不佳 我相信可能存在 CSS 问

  • CSS 过渡或动画从顶部向上滑动：100% 到底部：0

    内部 div 的高度可变 具体取决于内部文本的长度 该高度始终比外部 div 短 我希望当外部 div 悬停时 内部覆盖 div 从 top 100 向上滑动到bottom 0 我下面的 CSS 代码没有产生我想要的向上滑动效果 它只是在外

  • React 嵌入脚本标签不可样式化

    我打算将 SurveyMonkey 调查嵌入到我的网站中 用 React 制作 只是让它工作起来很麻烦 但最终这段代码工作了 let script let extractScript

随机推荐

  • 使用Webview在iPhone中查看.doc、.docx、.rtf、.ppt文件

    我想在 iPhone 中查看 doc docx rtf ppt 文件 但我猜我这边出了问题 它不适用于上述格式 但我的代码对于 txt 和 pdf 文件工作正常 我已阅读有关 Webview 的文档 它指出它支持查看上述文档 下面是我的 d

  • 在 R 中执行行之间的计算

    我试图弄清楚如何跨行 或行之间 进行计算 我尝试过查找此内容 但显然我的 Google Fu 今天并不强大 因为我只是找不到正确的搜索词 这是我要处理的数据类型的超级简化示例 mydf lt data frame pair rep 1 2

  • Linkedin API 用户分享统计

    也许我错过了有关 LinkedIn API 端点的一些信息 但在我看来 Linkedin API 没有端点 URL个人资料 墙 发布的帖子统计 喜欢 评论 甚至有机搜索统计数据 展示次数 点击次数 参与度 这很奇怪 因为公司 API 对于其

  • 连接被拒绝！ selenium 服务器是否在边缘启动了 nightwatch

    我已经创建了一个项目 它是一个 vue js 应用程序 有一小部分单元测试 玩笑 和一个端到端测试 夜更 当我尝试使用 npm 运行端到端测试时 我得到 Error retrieving a new session from the sel

  • 在Delphi中使用接口有哪些优点和缺点？

    我已经使用 Delphi 类有一段时间了 但从未真正开始使用接口 我已经读过一些关于它们的内容 但想了解更多 我想听听您在使用 Delphi 中的接口时遇到的优点和缺点 包括编码 性能 可维护性 代码清晰度 层分离以及一般而言您能想到的任何

  • 浏览器兼容自动换行和空格：pre？

    我需要保留并换行 div 中的文本 到目前为止 我很难找到解决方案 我找到的最佳解决方案并不适用于所有浏览器 以下内容适用于 Chrome 和 IE6 但在 Firefox 中文本不换行 white space pre word wrap

  • Spring可缓存异步更新，同时返回旧缓存

    有休息控制器 它调用 Cacheable方法来自 Service My CacheManager has expireAfterWrite超时 所以超时后使用rest gt service方法时 必须重写缓存 但问题是 如果同时有许多剩余调

  • 从列表框中选定的项目中提取内容 (urwid)

    我正在 urwid 中创建一个列表框 其中每个项目都是从 URL 列表中提取的 URL 当选择一个项目并单击 ENTER 时 我想提取 URL 并在浏览器中打开它 到目前为止 这是我的代码 class SelectableText urwi

  • 通过 ServiceStack 加密消息

    给定一个应用程序需要交换 ConsumerKey ConsumerSecret 等信息以获取 oAuth server running WebApi over ServiceStack consumer is a desktop app 希

  • python 中的一行 ftp 服务器

    python 中是否可以使用一行命令来创建一个简单的 ftp 服务器 我希望能够以快速 临时的方式将文件传输到 Linux 机器 而无需安装 ftp 服务器 最好是使用内置 python 库的方法 这样就不需要安装任何额外的东西 强制性的T

  • Windows 应用商店应用程序使用自签名 SSL 证书连接到 HTTPS

    我有一个 Windows 应用商店应用程序 Metro 应用程序 我想连接我通过 HTTPS 构建的 Web 服务 我正在为我的网络服务使用自签名证书 但是当我尝试通过 System Net HttpClient PostAsync 从我的

  • 多处理的好例子实现？

    我正在尝试将我的程序之一转换为使用多处理 最好是多处理池 因为这些似乎更容易做到 概括地说 该过程是根据图像创建补丁数组 然后将它们传递到 GPU 进行对象检测 CPU和GPU部分各耗时约4秒 但CPU有8核 不需要等待GPU 因为数据经过

  • 仅冻结 html 表格的顶行（固定表格标题滚动）

    我想制作一个顶行冻结的 html 表格 这样当你垂直向下滚动时你总是可以看到它 有没有一种聪明的方法可以在不使用 JavaScript 的情况下实现这一点 请注意 我不需要冻结左列 我知道这有几个答案 但这些都没有真正帮助我 我发现本文 h

  • 如何使用 JavaPOS 通过 Epson 打印机打印收据？

    如何开发 Java 软件来使用 Epson 收据打印机打印收据 从 Epson 网站获取 Epson JavaPOS ADK 您需要注册才能下载 确保您安装了 32 位 JVM Install the Epson JavaPOS ADK 选

  • 在Java中反转大量文本文件

    反转异步上传到 servlet 的大型文本文件 以可扩展且高效的方式反转该文件 的最佳方法是什么 文本文件可能很大 千兆字节长 可以假设多个服务器 集群环境以分布式方式执行此操作 鼓励开源图书馆考虑 我正在考虑使用 Java NIO 将文件

  • 页脚位于底部但不粘

    我试图让页脚齐平到页面底部 但不一定是粘性的 只需位于底部 以防用户向下滚动 这 有效 但页脚出现后底部似乎有一些空白 看起来有点尴尬 有谁知道CSS将页脚刷新到底部并保持在最底部而不使其粘着的最佳方法吗 如果您希望我发布我的 html c

  • 如何在 django Rest 框架中将多个变量传递给 modelViewSet？

    我在用http www django rest framework org http www django rest framework org 我有一个场景 我想根据需要从数据库获取数据来传递两个或多个变量 在下面的代码中 只有 pk 存

  • Wicket @SpringBean 不创建可序列化代理

    SpringBean PDLocalizerLogic loc 当使用上面时 我收到 java io NotSerializedException 这是因为 loc 不可序列化 但这不应该成为问题 因为 spring bean 是可序列化的

  • 将切片扩展到其容量的最简单方法是什么？

    我有一个程序 它使用缓冲池来减少代码中一些性能敏感部分的分配 像这样的事情 播放链接 https play golang org p c gsqBcbE some file or any data source var r io Reade

  • Internet Explorer 无法识别 SVG 元素的 CSS

    我有一个 SVG 图像地图 链接上带有悬停样式 有关 SVG 图像映射的更多信息here http thenewcode com 760 Create A Responsive Imagemap With SVG 我测试过的所有受人尊敬的浏

热门标签