跨浏览器定位HTML/CSS的问题
我被困在跨浏览器兼容性地狱，我只是没有网页设计专业知识（我是一个Web开发人员）弄清楚如何解决这个问题，而不会打破其他浏览器。我将不胜感激任何改变HTML和CSS的建议，使其在浏览器（IE9，Firefox，Chrome）之间兼容。我也遇到了悬停在锚链接上的问题（“购买它！”），因为文本大小调整了周围的组件。我试图通过改变悬停事件的填充来弥补，但无济于事。谢谢你的任何建议，你可以给谁比HTML/CSS更习惯于java/php编码的人。跨浏览器定位HTML/CSS的问题
<html>
<head>
<style type="text/css">
body
{
background: #EEEEEE;
}
div#demo
{
background: #5B9EE0;
margin-left:auto;
margin-right:auto;
width:650px;
font-family: verdana, normal, sans-serif;
border-radius: 10px 10px 10px 10px;
}
div#demoHeader
{
text-align:center;
font-size:24px;
font-weight:bold;
color:#FFFFFF;
}
div#demoFooter
{
clear:both;
padding:5px;
font-size:28px;
background-color:#EEEEEE;
text-align:right;
}
form#demoForm #demoBodyText
{
float:left;
margin-left:10px;
padding:6px;
}
form#demoForm #demoBodyOptions
{
float:left;
margin-right:10px;
width:300px;
}
form#demoForm fieldset
{
margin: 0;
padding: 0;
border: none;
}
form#demoForm fieldset legend
{
font-size:16px;
font-weight: bold;
color:#FFF;
}
fieldset#demoBodyText #demoBodyTextArea
{
width:300px;
height:200px;
border-color: #DAE9F8;
border-style: solid;
border-width: 4 px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 10px 10px 10px 10px;
padding:4px;
resize:none;
}
.demoOptionsLabelCell
{
width:70px;
text-align:left;
display:inline;
float:left;
}
.demoOptionsSelectCell
{
width:110px;
display:inline;
float:left;
}
.demoOptionsSelectCell select
{
/*float:right;*/
}
#demoBodyOptions .demoOptionsRow
{
background: #85B5E7;
border-color: #DAE9F8;
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px 5px 5px 5px;
height: 20px;
list-style: none;
padding:5px;
margin-bottom: 2px;
}
#demoBodyOptions .demoOptionsRowItems
{
list-style-type: none;
display: inline;
}
#demoBodyOption .demoOptionsRowItems li
{
display: inline;
}
#demoSubmitListItem
{
line-height:20px;
}
#demoSubmitButton
{
border: none;
width:108px;
height:30px;
font-size:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 0px 0px 20px 20px;
color: #000;
background-color:FF9900;
position:relative;
left:34px;
bottom:2px;
clear:both;
}
#demoSubmitButton:hover
{
font-weight: bold;
cursor:pointer;
cursor:hand;
}
a#demoLink
{
border: none;
padding-left:20px;
padding-right:20px;
padding-top:3px;
text-decoration:none;
padding-bottom:4px;
font-size:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 0px 0px 20px 20px;
color: #000;
background-color:FF9900;
position:relative;
left:5px;
bottom:2px;
}
#demoLink:hover
{
font-weight:bold;
padding-right:16px;
padding-left:16px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="demo">
<div id="demoHeader">
Demo
</div>
<div id="demoBody">
<form id = "demoForm" name="demoForm" method="get" action="myscript.php">
<fieldset id="demoBodyText">
<legend align="center">Demo Text</legend>
<textarea id="demoBodyTextArea" onFocus="if(this.value == 'Enter your demo text here!'){this.value=''; this.onFocus=null;}">Enter your blah blah here!</textarea>
</fieldset>
<fieldset id="demoBodyOptions">
<legend align="center" >Options</legend>
<ul>
<li class="demoOptionsRow">
<ul class="demoOptionsRowItems">
<li class="demoOptionsLabelCell">
Option:
</li>
<li class="demoOptionsSelectCell">
<select>
<option class="center" value="divider">----(US English)----</option>
</select>
</li>
</ul>
</li>
<li class="demoOptionsRow">
<ul class="demoOptionsRowItems">
<li class="demoOptionsLabelCell">
Option:
</li>
<li class="demoOptionsSelectCell">
<select>
<option value="320">Fastest</option>
</select>
</li>
</ul>
</li>
<li class="demoOptionsRow">
<ul class="demoOptionsRowItems">
<li class="demoOptionsLabelCell">
Option:
</li>
<li class="demoOptionsSelectCell">
<select>
<option value="4.2">Highest</option>
</select>
</li>
</ul>
</li>
<li class="demoOptionsRow">
<ul class="demoOptionsRowItems">
<li class="demoOptionsLabelCell">
Option:
</li>
<li class="demoOptionsSelectCell">
<select>
<option value="none">None</option>
</select>
</li>
</ul>
</li>
<li style="list-style:none;">
<a href="http://www.google.com" id="demoLink">Buy it!</a>
<input id = "demoSubmitButton" type="submit" value="Do it!" />
</li>
</ul>
</fieldset>
</form>
</div>
<div id="demoFooter">
Powered by <img align="top" src="someimage" />
</div>
</div>
<br/>
<br/>
</body>
</html>
编辑：
在Sparky672坚持在这里究竟是怎么回事击穿。两个按钮在浏览器中的位置不一致。在Mozilla中，它们排列在底部，在铬中，右边的按钮稍微向下，并且在一切中都完全对齐。因此，通过更改按钮的相对位置不可修复，因为修改浏览器的结果会导致其他定位不一致（即修复，即，Chrome和Firefox错位按钮）。
编辑2：
鉴于我希望它是什么样子，这两个按钮条款与期权的行中的所有三种浏览器底部对齐。
再次感谢您的建议，我尽可能快地尝试了它们。
的jsfiddle地点：
摆脱特殊填充为a#demoLink:hover，并a#demoLink加：
display: block;
float: left;
white-space: nowrap;
width: 72px; /*This should be the width, in pixels, that you want the button to remain*/
这有效地消除了孩子文本的大小有父容器上的影响。 （参见：http://jsfiddle.net/5yVzV/）
编辑：另外，以#demoSubmitButton，除去clear: both并添加：
display: block;
float: left;
美丽，这固定了Firefox和Chrome之间的定位差异。在IE中它仍然看起来有点奇怪，但它可以忍受。你知道为什么在IE中做到这一点！按钮不是大胆的，并且在悬停时切换到手形光标，也不是所有元素的舍入？我查看了w3学校，并且这些功能对于IE来说似乎没有特殊的语法。 – thatidiotguy 2012-03-23 17:21:25
请确保在打开''标签前指定文档类型，否则IE将以怪癖模式呈现文档，这会产生一系列古怪的布局问题。另外，IE6只识别''元素的'：hover'伪类，除非你在CSS中添加一个特殊的脚本。看到这个线程的更多信息：http://stackoverflow.com/questions/2571073/ie6-hover-issue – Aaron 2012-03-23 20:20:39
对于#demoLink，补充一点：
display: inline-block;
width:100px;
text-align: center;
，并在#demoLink去除填充：悬停
a#demoLink:hover
{
font-weight:bold;
text-decoration:none;
}
做同样的事情for #demoSubmitButton
因此，不幸的是，仍然有两个“按钮”按不同的方式排列， Firefox和Chrome。我是否应该放弃所有的相对定位？我觉得我正在处理这两个字段集正在引起这里的问题。相对定位它们会更好吗，并取消浮动？ – thatidiotguy 2012-03-23 17:01:24
@thatidiotguy，那是因为你还没有在你的问题中解释这个问题。这个人只是提出了一个解决方案来解决你提到的唯一问题......悬停问题。 – Sparky 2012-03-23 17:13:28
我发布了一个编辑，进一步解释了手头的问题。就我所期望的而言，这两个按钮与所有三个浏览器中选项行的底部对齐。 – thatidiotguy 2012-03-23 17:15:30
请澄清这一措辞。你说的是一个跨浏览器的问题，但没有说明它是什么。然后，你说**你也有悬停问题......是同一个问题还是另一个问题？ – Sparky 2012-03-23 16:43:08
问题在于锚点链接（Buy it！）和按钮（Do it！）的位置。锚链接悬停问题是分开的，但我想有人读过这个问题可能会知道一个快速解决方案。 Java/PHP就是让大家知道我的经验是在实际编程中，而不是在网页设计中，所以人们对我的背景知之甚少，所以他们知道我们可以讨论手头问题的级别。对不清楚的道歉。 – thatidiotguy 2012-03-23 16:46:08
请使用描述性词语来解释问题_来解释确切的问题。你必须告诉我们你的意思_“安置”_...向下，向右，向左，不垂直对齐，水平，什么？不要认为我们会同意看起来是正确的，并假装**，我们不知道关于你设想的是什么。** – Sparky 2012-03-23 17:06:41