Я застрял в адском кросс-браузерном совместимости, и у меня просто нет опыта веб-дизайна (я веб-разработчик), чтобы выяснить, как решить проблему, не ломая ее в других браузерах.Буду признателен за любые советы по изменению HTML и CSS, чтобы сделать его совместимым между браузерами (IE9, Firefox, Chrome).У меня также возникает проблема, когда указатель мыши над ссылкой («Купи!») Перемещает компоненты из-за изменения размера текста.Я попытался компенсировать это, изменив отступы при наведении курсора, но безрезультатно.Спасибо за любой совет, который вы можете дать кому-то, кто более привык к 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 правая кнопка немного дальше вниз, то есть все полностью выровнено по-разному.Поэтому это невозможно исправить путем изменения относительного положения кнопок, так как любое изменение, фиксируемое в браузере, приводит к непоследовательному позиционированию в других (т. Е. Исправлении, т. Е. Кнопках смещения Chrome и Firefox).
РЕДАКТИРОВАТЬ 2:
С точки зрения того, как я ожидаю, это будет выглядеть, две кнопки будут выровнены по нижней части строк параметров во всех трех браузерах.
Еще раз спасибо за ваши предложения, я пробую их как можно быстрее.
JSFiddle Расположение:
http://jsfiddle.net/73Vs3/