html - 图像火狐浏览器不匹配

标签 html css google-chrome firefox

我是第一次张贴者，长期的爱好者。

所以我在我的个人网站上工作，我在 html/css 方面没有太多经验，但我遇到了 firefox 和 chrome 之间奇怪的不匹配。我想知道互联网上的智者是否可以指导我到我的(可能是明显的)错误所在。

我遇到的问题是 firefox 会删除我图像的最后 2 个字母。我给不同的部分涂上了颜色，这样它就更明显了。我还将为那些想要查看的人发布我的代码。如果你们能指出我的解决方案，我将非常感激。

火狐: http://i.imgur.com/aFbYWS7.png Chrome : http://i.imgur.com/xumAiwk.png 

/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}

/* Structure */
#wrapper {
	width: 96%;	
	max-width: 920px;
	margin: auto;
	padding: 2%;
} 

/* Banner */
#banner {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	background-color:red;
}

	#banner img {
		max-width: 450px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		background-color:blue;
	}

#occp {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	background-color:green;
}

	#occp img {
	max-width: 800px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		background-color:yellow;
	}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title> Demo | Responsive Web</title>
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
		<link href="test.css" type="text/css" rel="stylesheet">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<script type='text/javascript' src='scripts/respond.min.js'></script>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<div id="banner">
					<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
				</div>
				<div id="occp">
					<img src="https://dl.dropboxusercontent.com/u/15472320/occp.svg" alt="Electrical Engineering Student" />
				</div>
			</header>
		</div>
	</body>
</html>

最佳答案

鉴于评论部分中的 JS fiddle SVG 文件，我能够将宽度设置为 100% 并使图形在 chrome 和 firefox 中具有相同的大小，我没有测试过 opera、IE、Edge 或 safari。 

<svg
    ...
   width="100%"
    ...>
</svg>

SVG 的 JS Fiddle Fork

http://jsfiddle.net/7nn94k13/1/

将 SVG 放在原始代码中的代码片段

/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}

/* Structure */
#wrapper {
	width: 96%;	
	max-width: 920px;
	margin: auto;
	padding: 2%;
} 

/* Banner */
#banner {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	background-color:red;
}

	#banner img {
		max-width: 450px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		background-color:blue;
	}

#occp {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	background-color:green;
}

	#occp img {
	max-width: 800px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		background-color:yellow;
	}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title> Demo | Responsive Web</title>
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
		<link href="test.css" type="text/css" rel="stylesheet">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<script type='text/javascript' src='scripts/respond.min.js'></script>
	</head>
	<body>
		<div id="wrapper">
			<header>
				<div id="banner">
					<img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" />
				</div>
				<div id="occp">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="100%"
   height="22.796349"
   id="svg3086"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="New document 6">
  <defs
     id="defs3088" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="222.35964"
     inkscape:cy="-265.74468"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="463"
     inkscape:window-height="423"
     inkscape:window-x="100"
     inkscape:window-y="100"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata3091">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-152.64036,-243.82116)">
    <text
       xml:space="preserve"
       style="font-size:31.58077812px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:110.00000238%;letter-spacing:-4.82484102px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Franklin Gothic Book;-inkscape-font-specification:Franklin Gothic Book"
       x="150.44296"
       y="261.72156"
       id="text4820-4"
       sodipodi:linespacing="110%"><tspan
         sodipodi:role="line"
         id="tspan4822-0"
         x="150.44296"
         y="261.72156"
         style="font-size:26.31731796px;letter-spacing:-0.87724388px">Electrical Engineering Student</tspan></text>
  </g>
</svg>
				</div>
			</header>
		</div>
	</body>
</html>

关于html - 图像火狐浏览器不匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31569997/

上一篇：html - 显示 :inline 时鼠标单击未注册在多行文本的尾随空格中

下一篇：html - 选项卡图标不会消失

相关文章：

html - 网站在 Firefox 中看起来很棒，在 Chrome 中看起来很差

javascript - 调用点击功能时无法让输入按键在 jQuery 中工作

html - CSS/HTML 中的字体名称需要大写吗？

linux - 处理来自 Firefox 和 Google Chrome 的故障转储

html - @media 不适用于所有设备

html - 缩略图没有按我想要的方式查看？

javascript - CSS HTML Bootstrap 布局问题

javascript - 如何在与段落一起使用的javascript中添加换行符

css - 需要帮助使用多个混合来创建 DRY 主题

javascript - 使用 jQuery 打开多个选项卡

©2024 IT工具网  联系我们