时间戳

首页 > 解决方案 > 这个 SVG 在 Chrome 中运行良好，但在 Internet Explorer 中却表现得很奇怪。有人可以帮我吗？

html - 这个 SVG 在 Chrome 中运行良好，但在 Internet Explorer 中却表现得很奇怪。有人可以帮我吗？

问题描述

我有这个 SVG，它在 Chrome 中渲染得很好，但在 IE 中它似乎表现得很奇怪。最初我需要将此 SVG 固定在顶部，但是当我使用position: fixed;它时，它在 Chrome 中呈现良好并且表现如预期，但在 IE 中由于某种原因它呈现在中间。

html, body
{
  height: 100%!important;
  width: 100%!important;
  padding: 0!important;
  margin: 0!important;
}
<!DOCTYPE html>
<html>
<head>
	<title>rough</title>
</head>
<body>
	<div class="page-container">
		<div class="content-container">

	<!--- Header -->
			<svg pointer-events="none" version="1.1" class="header" id="header" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="1134.63 310.46 562.51 101.82" enable-background="new 1134.63 310.46 562.51 101.82" xml:space="preserve">

				<path id="background_header" fill="#5FBA7D" d="M1697.14,412.28c0-40.87-41.05-41.05-41.05-41.05h-480.48c0,0-40.94,1.11-40.94-40.94
					c-0.08-0.05,0-19.83,0-19.83h562.46L1697.14,412.28z"/>
			</svg>

<!--- Content -->

			<div class="body-container=">
				<div class="card">
					<h1>Log in</h1>

					<form action="#">
						<input type="text">
						<input type="password">

						<button type="submit" class="main-button">Log in</button>
					
					</form>
					<p>
						<h4 class="link-text">Forgot password or username?</h4>&nbsp;
						<a href="#" data-toggle="modal" data-target="#myModal" id="rbutton" class="link">Reset a new one</a>
					<br>
						<h4 class="link-text">Don't have an account?</h4>&nbsp;
						<a href="#" class="link">Create one</a>
					<br>
						<h4 class="link-text">By logging in you agree to our</h4>&nbsp;
						<a href="#" class="link">Terms of Service</a>
						<h4 class="link-text">and</h4>&nbsp;
						<a href="#" class="link">Privacy Policy</a>
					</p>
				</div>

</body>
</html>

<style>
	


</style>

我已经尝试了很多东西，但看到了两种结果之一：- SVG 被渲染在屏幕中间而不是顶部，尽管它是 100% 的宽度，正如预期的那样。屏幕截图 - https://cdn1.imggmi.com/uploads/2019/10/17/20083d8ba442704e852b12667a2cfcd3-full.png B :- 它没有像预期的那样占用 100% 的宽度，而是在顶部呈现。截图 - https://cdn1.imggmi.com/uploads/2019/10/17/88cb40d088a10496abab10a63faaf4a7-full.png

我在此处提供的代码使 IE 在屏幕中间呈现 svg，但我希望它位于顶部。

标签： htmlcssinternet-explorersvg

解决方案

尝试将 svg 包装在 div 中

并使用这种风格

<div class="div_wrap">
        <svg pointer-events="none" version="1.1" class="header" id="header" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="1134.63 310.46 562.51 101.82" enable-background="new 1134.63 310.46 562.51 101.82" xml:space="preserve">

            <path id="background_header" fill="#5FBA7D" d="M1697.14,412.28c0-40.87-41.05-41.05-41.05-41.05h-480.48c0,0-40.94,1.11-40.94-40.94
                c-0.08-0.05,0-19.83,0-19.83h562.46L1697.14,412.28z"/>
        </svg>
  </div>

.div_wrap {
  position: fixed;
  top:0;
  left:0;
  height:20px;
  width : 100%;
 }

试试这个

推荐阅读