图片firefox chrome missmatch

时间：2015-07-22 17:25:44

标签： html css google-chrome firefox

我是第一次张贴海报，长期以来一直是爱好者。

所以我正在我的个人网站上工作，而且我在html / css方面没有那么多经验，但我遇到了firefox和chrome之间奇怪的不匹配。我想知道互联网的聪明人是否可以指引我到我的（可能是明显的）错误的位置。

我遇到的问题是firefox将剪切我图像的最后两个字母。 Ive为不同的部分着色，使其更加明显。我还会为那些想要看到它的人发布我的代码。如果你们能指出我的解决方案，我将非常感激。

火狐： http://i.imgur.com/aFbYWS7.png 铬： 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>

2 个答案:

答案 0 :(得分：0)

我对HTML / CSS做了一些改动而没有运气，因为评论者说这很可能与FF如何处理SVG有关。

如果viewport和viewBox的宽高比不同，则preserveAspectRatio属性会指示浏览器如何显示图片。

这里有两个很好的资源可以参考这个主题。

http://jonibologna.com/svg-viewbox-and-viewport/ http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg

或者，使用png或jpg，因为这些文件可能不会出现此问题。

答案 1 :(得分：0)

鉴于评论部分中的JS小提琴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>

相关问题
最新问题