Мистика в IE 8

AloneCoder · December 9, 2011

Здравствуйте.

Не могу понять с версткой одну мистику: IE 8, имеются два одинаковых селекта для которых прописаны свойства position: relative и left: 20px. Один из них отображается корректно, а второй съезжает, самое интересное когда в инструментах разработчика для кривого селекта убираешь галочку с left: 20px, а потом сразу же ее возвращаешь, при этом по сути ничего не поменяв - selectы становятся на свои места. Вот как так?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Фиксированный подвал</title>
	<script type="text/javascript" src="jQuery.js"></script>
	<script type="text/javascript" src="jqModal.js"></script>
	<script type="text/javascript">
		$().ready(function() {
			$('#dialog').jqm();
		});
	</script>
	<link rel="stylesheet" type="text/css" href="jqModal.css" />
  </head>
 <body>
<a href="#" class="jqModal">view</a>
<div class="jqmWindow" id="dialog">
<div class="name_line">Где живет этот человек</div>
<div class="selectWrapper">
<span>Страна</span><select name="idCountry" id="idCountry"><option value="NULL">Неизвестно</option></select></div>
<div class="selectWrapper">
<span>Город</span><select name="idCity" id="idCity"><option value="NULL">Неизвестно</option></select></div>
<div class="nextWrapper">
<a href="#z" class="jqmClose"><img src="next.png" alt="" /></a>
</div>
<div class="linkWrapper">
<a href="#z" class="jqmClose">Я не знаю где живет этот человек</a>
</div>
</div>
</body>
</html>

/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */

.jqmWindow {
    display: none;

    position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -217px;
    width: 434px;

    background-color: transparent;
	background: url('popup_box.png') no-repeat;
    border: 0;
    padding: 12px;
	height:252px;
}
.name_line {
	color: #ff9900;
	font-size:14px;
	font-size: 19px;
	text-align: center;
	height: 35px;
}
div.selectWrapper select {
    -moz-appearance: none;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #999999;
    float: right;
    height: 27px;
    left: 20px;
    padding-left: 10px;
    position: relative;
}

div.selectWrapper span {
	padding-left: 50px;
	line-height: 25px;
}


div.nextWrapper {
	margin-top: 20px;
}

div.nextWrapper, div.linkWrapper {
	text-align: center;
	height: 70px;
}
div.linkWrapper a{
color: #990000;
}

.selectWrapper {
	width: 350px;
	height: 27px;
	overflow: hidden;
	background: url('select.png') no-repeat right white;
	margin-bottom: 5px;
	-moz-border-radius: 10px;
	-opera-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

Edited December 9, 2011 by AloneCoder

Great Rash · December 9, 2011

Ну для начала пройдитесь валидатором, у вас документ невалидный. А потом уже разбираться надо будет.

AloneCoder · December 9, 2011

Добился валидности, однако проблему это не решило. Есть ли необходимость приводить здесь валидный HTML?

Great Rash · December 9, 2011

Лучше всего будет если вы воспроизведете проблему тут

AloneCoder · December 9, 2011

Отображается правда тоже странно) select получается выше фона и не видно стрелки у выпадающего списка

http://jsfiddle.net/uh9D8/2/

Great Rash · December 9, 2011

http://jsfiddle.net/xdZV2/2/

AloneCoder · December 9, 2011

http://jsfiddle.net/xdZV2/

Спасибо

AloneCoder · December 9, 2011

Хм, не работает в IE 8

Great Rash · December 9, 2011

Работает, я допилил. Еще раз внимательно посмотрите на ссылку.

http://jsfiddle.net/xdZV2/2/

AloneCoder · December 9, 2011

Спасибо. Вы очень мне помогли

Sign In

Мистика в IE 8

Question

AloneCoder

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

AloneCoder

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

AloneCoder

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

AloneCoder

Link to comment

Share on other sites

AloneCoder

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

AloneCoder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information