Question

我有这个html代码示例。当我按如下方式编写internal css时，它可以正常工作。但是当我用ID selector实现它时，它就赢了。

问题是图片尺寸超出应有的范围。

这里是没有ID selector

的代码

<!DOCTYPE html>
<html>
<head>
    <title>Omicron.com</title>
</head>
<body>
    <div>
        <img src="Header.png" alt="Header not Found" style="width:100%;min-width:10px;height:auto;position:relative;top:50px;">
    </div>
</body>
</html>

此处的代码为ID selector，此处为预览

<!DOCTYPE html>
<html>
<head>
    <title>Omicron.com</title>
<style>
#headerImage{
    width: 100%;
    min-width: 10px;
    height: 50px;
    position: relative;
    top: 50px;
}
</style>
</head>
<body>
    <div id="headerImage">
        <img src="Header.png" alt="Header not Found">
    </div>
</body>
</html>

谁能告诉我我做错了什么？

Answer 1

div id="headerImage" #headerImage是img元素。在第一个示例中，您将样式应用于img。因此，在第二个示例中，您将样式应用于div。要将样式应用于#headerImage内的#headerImage img，请使用<!DOCTYPE html> <html> <head> <title>Omicron.com</title> <style> #headerImage img { width: 100%; min-width: 10px; height: 50px; position: relative; top: 50px; } </style> </head> <body> <div id="headerImage"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Header not Found"> </div> </body> </html>作为选择器。

＆＃13;

function hideKeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {

    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);

    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {

        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);

      }, 200);
    };
    //focusing it
    field.focus();

  }, 50);
}

var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);

setTimeout(function() {
    field.focus();
    setTimeout(function() {
        field.setAttribute('style', 'display:none;');
    }, 50);}, 50);

$(document).keydown(function(e) {
    if (e.keyCode == 70) { 
        return false; // Equivalente a: e.stopPropagation(); e.preventDefault();
    }
});

$('input[type="text"]').keydown(function(e) {
    e.stopPropagation();
});


$('#dp1496686765253').focus(function() {
  this.blur();
});


var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

$('input[type="text"]').keydown(function(e) {
    e.stopPropagation();
});


$('#dp1496686765253').focus(function() {
  this.blur();
});

$(document.activeElement).filter(':input:focus').blur();

＆＃13;

Answer 2

您需要定位图像，而不是其父div。

#headerImage img{
    width: 100%;
    min-width: 10px;
    height: 50px;
    position: relative;
    top: 50px;
}

ID选择器不在CSS中工作

2 个答案: