我陷入跨浏览器兼容性地狱，我只是没有网页设计专业知识（我是一名网络开发人员）来弄清楚如何在不破坏其他浏览器的情况下解决问题。我很感激任何改变html和css的建议，使它在浏览器（IE9，Firefox，Chrome）之间兼容。我也遇到了悬停在锚点链接上的问题（“买它！”）由于文本调整大小而移动组件。我试图通过改变悬停事件的填充来弥补无济于事。感谢您的任何建议，你可以给那些比html / css更习惯java / php编码的人。
<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中，右边的按钮稍微向下，即所有内容都完全对齐。因此，通过更改按钮的相对位置无法解决这个问题，因为任何修改浏览器的结果都会导致其他位置不一致（即修复即chrome和firefox错位按钮）。
编辑2：
就我期望的情况而言，两个按钮与所有三个浏览器中的选项行的底部对齐。
再次感谢您的建议，我尽快尝试。
JSFiddle位置：
答案 0 :(得分：1)
对于#demoLink，请添加：
display: inline-block;
width:100px;
text-align: center;
并删除#demoLink上的填充：hover
a#demoLink:hover
{
font-weight:bold;
text-decoration:none;
}
为#demoSubmitButton做同样的事情
答案 1 :(得分：1)
摆脱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;