Text input with z-index inaccessible by click in I

2020-04-17 05:35发布

I have a borderless text input and an image input hovering above other graphics. You can see it here: http://www.wwmlaw.dreamhosters.com/index.php

You can tab into the text input in IE6 and IE8 and it will accept input then but clicking in it does not give you a cursor. All other browsers tested do fine.

The CSS is like so:

#homeSearchForm {
    position:absolute;
    z-index:1000;
}

#homeSearch {
    position:absolute;
    z-index:1000;
    width:230px;
    height:20px;
    border:none;
    top:16px;
    _top:14px;
    left:676px;
    _left:730px;
    border:none;
    background:none;
    color:#FFF;
}

#homeSearchButton {
    position:absolute;
    z-index:1000;
    width:55px;
    height:20px;
    border:none;
    top:17px;
    _top:15px;
    left:600px;
    _left:655px;
}

Any thoughts?

2条回答
▲ chillily
2楼-- · 2020-04-17 05:50

Based on this question

Input boxes with transparent background are not clickable in IE8

I added an IE only background image:

<!--[if IE]>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

containing

background-image:url(../g/spacer.gif); 

This resolved the issue.

JG

查看更多
手持菜刀,她持情操
3楼-- · 2020-04-17 05:53

Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

查看更多
登录 后发表回答