不同浏览器中的文本和图片间距/对齐问题

时间:2014-09-08 17:50:06

标签: html css browser alignment spacing

我对不同浏览器之间的间距和对齐有疑问。当我在不同浏览器上查看以下页面(http://www.psych.utoronto.ca/users/ferber/people.php)时,文本和图片的间距是完全不同的(某些浏览器提供的空间比其他浏览器多得多......我喜欢它在Safari上看起来最好的方式)。 / p>

有关如何在浏览器之间解决此问题的任何建议。下面是页面.php文件和常规样式表中的html代码。请原谅我在编码部门缺乏能力,我是网页设计界的新手。

谢谢!

贾斯汀

<?php

require("header.php");
?>


<h1>People</h1>
<h3><u>Victoria McLelland</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Victoria_crop.jpg" width="187" height="213" align=left>
  </TD>
  </IMG> I am a Post-Doctoral Fellow with Morgan Barense and Susanne Ferber. I completed my Ph.D. at the University of Auckland in New Zealand, where I examined the role of the hippocampus in encoding imagined episodic events into memory. Prior to this, I did my BA (Hons) in Psychology at the University of Guelph. I am generally interested in using fMRI to look at functional specialization within the medial temporal lobes. Outside the lab, I can usually be found spending time with my horse. <br /> Email: v.mclelland@gmail.com  </p>
<br>
<h3><u>Ryan Stevenson</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Ryan_crop.jpg" width="187" height="213" align=left>
  </TD>
  </IMG> I am a Banting Postdoctoral Fellow working with Morgan Barense and Susanne Ferber. I received my PhD from Indiana University before undertaking my first postdoc at Vanderbilt University. My research focuses on how we bind visual and auditory information from the environment into a unified percept. This research includes healthy individuals throughout the lifespan and clinical populations, specifically individuals with Autism. In my free time, I can usually be found reading, biking, traveling or cooking with friends. <br /> Email: ryan.andrew.stevenson@gmail.com  </p>
<br>
<h3><u>Kristin Wilson</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Kristin_crop.png" width="187" height="213" align=left>
  </TD>
  </IMG> I am a fourth year PhD student in the Ferber Lab, and completed my undergraduate degree at The University of Toronto.  I am interested in how individual differences in personality modulate attention and visual working memory, and the distinction between different modes of attention (such as selective and diffuse). I employ personality questionnaires to correlate different personality traits with attentional performance and elelectrophysiological marks of attention. In my spare time, I am a certified yoga teacher and enjoy playing guitar, hiking, and home rennovations.    <br /> Email: kwilson.psych@gmail.com  </p>
<br>
<h3><u>Sol Sun</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Sol_Sun_crop.jpg" width="187" height="213" align=left>
  </TD>
  </IMG> I am a first year PhD student in the Ferber Lab, also co-supervised by Jonathan Cant. I am interested in interactions between visual working memory and attention, and how these processes are engaged in high-level object perception and visual awareness. Some areas of current interest include: memory-guided visual search, studying conscious awareness using binocular rivalry / continuous flash suppression, the role of attentional scope in holistic perception of human faces and bodies, predicting strength of memory encoding using EEG oscillations.. <br /> Email: sol.sun@mail.utoronto.ca  </p>
<br>
<h3><u>Matt Lowe</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Matt_Lowe.jpg" width="187" height="213" align=left>
  </TD>
  </IMG> I am a first year PhD student in the Ferber Lab, also co-supervised by Jonathan Cant. My primary research investigates the representation of object and scene perception using psychophysical methods and functional neuroimaging. I am also interested in the nature of attention and awareness, and how individual differences in cognitive resources and capacity influence the way in which we perceive our immediate environment. Outside of the lab I enjoy traveling, with a special interest in mountaineering, but I can more often be found settled in at home with a good book. <br /> Email: mxlowe@gmail.com  </p>
 <br> 
<h3><u>Justin Ruppel</u></h3>
<p><IMG style='border:2px solid #000000; margin: 0px 10px' src="pics/Justin.jpg" width="187" height="213" align=left>
  </TD>
  </IMG> I am the lab manager and general trouble shooter for the Ferber Lab. I graduated from the University of Toronto with a degree in Human Biology and Psychology Research. After graduating, I spent a stint working at The Hospital for Sick Children and Mount Sinai Hospital as a research assistant for Dr. Joanne Rovet and Dr. Warren MacIsaac respectively. When I'm not untangling the functional threads of the human brain, I can be found at various speakeasies across Toronto playing folk, blues and jazz music. <br /> Email: ruppel@psych.utoronto.ca  </p>
  <br> 
<h3><u>Alumni</u></h3>
Maha Adamo, Ph.D.<br>
Hana Burianova, Ph.D.<br>
Steve Emrich, Ph.D.<br>Arin Klug, M.A.<br>Mark Shaw, M.A.<br>Stephenie Harrison<br>
Simona Mindy<br>
Linda Murray<br>
Raffles Cowan<br>
Felix Lee<br>
Lidia Liu<br>
Peter Lenkic<br>

  <?php
require("footer.php");

?>


/*Keeps vertical scrollbar present to prevent page shifting*/


html { min-height: 100%; margin-bottom: 1px; }

body {
    font-family: "Helvetica Neue", sans-serif;
    background: #FFFFFF;
    text-align: center;
    width: 100%;
    overflow-x:auto;
    font-size: 11.5pt;
}


#menu{
    width: 800px;
    background: #FFFFFF;
    padding:0px;
}

#main {

    width: 800px;
    height: 100%;
    margin-top:10px;
    text-align: left;
    padding:0px;
    overflow: hidden;
}

#innerLeft {

    float: left;
    width: 590px;
    height: 100%;
    background: white;
    padding: 5px;
    padding-bottom: 50px;
    text-align: left;
    overflow: hidden;

}

#innerRight {   

    float: left;
    width: 170px;
    height: 100%;
    background: white;
    border-left:thin solid grey;
    padding: 5px;
    padding-bottom: 50px;
    text-align: left;
    margin-left: 10px;
    font-size: 10pt;
    overflow: hidden;

}

ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}

ul#nav{margin-left: 0px;width:800px}

ul#nav li{float:left;margin-right: 3px;text-align: center;list-style: none outside none;position:relative;}

ul#nav a{float:left;width: 6em;padding: 5px 0;background: #B0C4DE;text-decoration:none;color: #000}

ul#nav a:hover{background: #E7F1F8;color: #000}

ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #000000;color: #FFFFFF}

ul#list,ul#list li{list-style-type:none;margin-left:0px;margin-top:8px;padding:0}

ul#pub,ul#pub li{list-style-type:none;margin-left:0px;margin-top:12px;padding:0}  

/* ------- Dropdown Menu-------- */
#nav li:hover {background:#777;}

#nav ul {
position:absolute;
left:-999em;
top:1.9em;
list-style:none;
}

#nav li:hover ul {
display: inline-block;
left: -40px;
position: absolute;

}




/* ------- calendar specific styles -------- */

a.cal:link {text-decoration:underline;color:blue;display:block;width:100%;height:100%;background:white;}
a.cal:visited {text-decoration:underline;color:blue;display:block;width:100%;height:100%;background:white;}
a.cal:hover {text-decoration:underline;color:black;display:block;width:100%;height:100%;background:#DDDDDD;}
a.cal:active {text-decoration:underline;color:blue;display:block;width:100%;height:100%;background:white;}

1 个答案:

答案 0 :(得分:0)

嗯,唯一的方法就是进行大量的微调。可悲的是,由于浏览器大战&#34;没有任何浏览器呈现相似性,并且大多数人都拒绝遵守&#34;正常&#34; CSS,所以他们开始使用前缀。

在这种情况下,您需要执行此操作:

1)重置CSS(你可以使用那里的任何CSS重置)

2)包括HTML5垫片(你好IE!)

3)开始使用这样的条件CSS:

Webkit:Safari,Opera和Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){/*whatever*/}

<强> iPhone

@media screen and (max-device-width: 480px) {/*whatever*/}

<强> IE

<!--[if IE]>
add styles here or style sheet
<![endif]-->

当然您可以使用特定的IE版本目标,这意味着您可以更改IE版本并使用

less than IE9: <!--[if lt IE 9]>
less than or equal to IE9: <!--[if lte IE 9]>
greater than IE9:<!--[if gt IE 9]>
greater than or equal to IE9:<!--[if gte IE 9]>

4)完成所有这些后,让我们去臭名昭着的供应商前缀。每天列出和更改的时间太长,但与此同时您可以查看Vendor Prefixed CSS Overview。基本上,如果您无法使用上述任何方法进行调整,那么您可能需要使用供应商前缀属性。