Почему мои элементы div смещаются, когда контейнерный div переполнен: auto set - PullRequest
Новая
       5

Почему мои элементы div смещаются, когда контейнерный div переполнен: auto set

1 голос
/ 21 января 2010

Вот пример кода, нарушающего работу ... Обратите внимание, что этот код работает, как и ожидалось, в FireFox. Проблема в Internet Explorer. 

function init() {
    $(".listOUT").bind("mouseenter", function(e) {
        $(this).toggleClass('listOUT', false);
        $(this).toggleClass('listIN', true);
      })
      .bind("mouseleave", function(e) {
        $(this).toggleClass('listIN', false);
        $(this).toggleClass('listOUT', true);
      });
#container {
  border: 1px solid black;
}
.controlContainer {
  display: inline;
  position: absolute;
  height: 25px;
  border: none;
}
.listOUT {
  position: relative;
  width: 100%;
  cursor: pointer;
  margin: 0 0 0 0;
  height: 85%;
  border: solid 1px #7F9DB9;
  padding-right: 20px;
  /*
    	background:url('images/ddImage_out.gif') no-repeat right center;
    	*/
}
.listIN {
  position: relative;
  width: 100%;
  cursor: pointer;
  margin: 0 0 0 0;
  height: 85%;
  border: inset 1px #7F9DB9;
  padding-right: 20px;
  /*
        background:url('images/ddImage_in.gif') no-repeat right center;
        */
}
.listTEXT {
  text-transform: none;
  width: 100%;
  position: relative;
  font-size: 8pt;
  color: Black;
  font-family: Verdana;
  cursor: pointer;
  border: none;
  padding-left: 4px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
}
</style> </head> <body onload="init();"> <form id="form1" runat="server"> <div style="width:600px; height:200px;"> <div id="container" style="overflow:auto;position:relative;width:100%; height:100%;"> <div id="control1Container" style="left:67%;top:105px;width:15%;" class=
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
</script>


<form id="form1" runat="server">
  <div style="width:600px; height:200px;">
    <div id="container" style="overflow:auto;position:relative;width:100%; height:100%;">
      <div id="control1Container" style="left:67%;top:105px;width:15%;" class="controlContainer">
        <div id="control1" class="listOUT">
          <input type="text" class="listTEXT" id="ddTextBox1" readonly="readonly" value="Digital" name="ddTextBox1" />
          <input type="hidden" value="1" id="selSelected1" name="selSelected1" />
        </div>
      </div>
      <div id="control3Container" style="left:50%;top:15px;width:36%;" class="controlContainer">
        <div id="control3" class="listOUT">I am a control</div>
      </div>
      <div id="control4Container" style="left:40%;top:145px;width:36%;" class="controlContainer">
        <div id="control4" class="listOUT">I am a control</div>
      </div>
      <div id="control2Container" style="left:47%;top:225px;width:36%;" class="controlContainer">
        <div id="control2" class="listOUT">I am a control</div>
      </div>
      <!-- more controls here -->
    </div>
  </div>
</form>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2010

Я думаю, я понимаю, что вы имеете в виду. Когда я открыл вашу веб-страницу в Internet Explorer 8 и указал на элементы управления, они переместились влево.

У меня очень мало опыта работы с javascript, и я никогда не использовал jquery, но если все, что вам нужно, это изменить цвет границ при вводе мыши и отпускании мыши, я могу вам помочь.

Перейдите на http://www.mkforlag.com/eng_contact/ и щелкните в светло-голубых полях, чтобы увидеть, как граница становится коричневой, а фон - желтым. Этого эффекта вы хотите достичь?

0 голосов
/ 21 января 2010

Какую версию IE вы используете?Поведение в Firefox такое же, как в IE7 и IE6 даже.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...