Я застрял в адсорсинге с совместимостью между браузерами, и у меня просто нет опыта веб-дизайна (я веб-разработчик), чтобы выяснить, как исправить проблему, не нарушая ее на других браузеры. Я был бы признателен за любые рекомендации по изменению html и css, чтобы сделать его совместимым между браузерами (IE9, Firefox, Chrome). У меня также есть проблема, когда наведите указатель на ссылку привязки («Купите!») Перемещает компоненты из-за изменения размера текста. Я попытался компенсировать это, изменив прописку на события наведения. Благодарим вас за любой совет, который вы можете дать тому, кто больше используется для кодирования java/php, чем html/css.Проблемы с перекрестным браузером с позиционированием 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>
EDIT:
По настоянию Sparky672 здесь является пробой того, что именно происходит. Положение этих двух кнопок несовместимо в разных браузерах. В Mozilla они выстраиваются в нижней части, а в хроме правая кнопка немного ниже, и, то есть все полностью выровнено по-разному. Таким образом, это невозможно устранить, изменив относительные положения кнопок, поскольку любое изменение для исправления в браузере приводит к непоследовательному позиционированию в других (например, исправление, хром и неправильные кнопки firefox).
EDIT 2:
С точки зрения того, что я ожидаю, что это выглядеть, две кнопки, чтобы привести в соответствие с нижней строк опций во всех трех браузерах.
Еще раз спасибо за ваши предложения, я пробую их как можно быстрее.
JSFiddle Расположение:
Просьба уточнить формулировку этого. Вы говорите о проблеме с несколькими браузерами, не говоря о том, что это такое. Тогда вы сказали, что у вас тоже ** есть проблема с зависанием ... это то же самое или другое? – Sparky
Проблема заключается в размещении якорной ссылки (купите ее!) И кнопке (сделайте это!). Проблема с привязкой к привязке является отдельной, но я решил, что кто-то, кто прочитает этот вопрос, может знать быстрое решение. Java/PHP - это только я, позволяющий всем знать, что мой опыт в реальном программировании, а не в веб-дизайне, чтобы люди немного узнали о моем прошлом, чтобы они знали уровень, на котором мы можем обсудить проблему. Извинения за отсутствие ясности. – thatidiotguy
Пожалуйста, задайте вопрос_, чтобы объяснить точный вопрос, используя описательные слова. Вы должны сказать нам, что вы подразумеваете под «местом размещения» _...слишком далеко вниз, вправо, влево, не выровнено по вертикали, горизонтально, что? Не думайте, что мы согласны с тем, что выглядит правильно и притворяться, как будто мы ничего не знаем о том, что вы предполагали. ** – Sparky