Question

我在我的网站上添加了一个搜索栏，在点击图标时使用JavaScript进行扩展，并在输入失去焦点时折叠。

它在Chrome 36和Safari 5上运行顺利，但在Firefox 31和IE 11上，表单内的内容泄露在外面。我添加了＆＃34; overflow：hidden ＆＃34;虽然它修复了表单的高度，但它不能修复文本的位置。我该如何解决？感谢。

以下是预览网站：http://www.stackedoverflowexample01.tumblr.com/

CSS：

  form {
    width: 175px;
    height: 25px;
    position: relative;
    display: inline-block;
    overflow: hidden;
  }

  #submit {
    display: none;
  }

  form .icon {
    width: 25px;
    height: 25px;
    background: transparent;
    display: inline-block;
    position: absolute;
    min-height: 1px;
    right: 0;
  }

  form .submit {
    width: 25px;
    height: 25px;
    background: transparent;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    min-height: 1px;
    background: none;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 0;
  }

  form #search {
    -webkit-appearance: none;
    height: 25px;
    width: 0;
    padding: 0;
    opacity: 0;
    border: none;
    outline: none;
    position: absolute;
    right: 0px;
    background-color: #eaeaea;
    font-family: serif;
    display: inline-block;
    overflow: hidden;
  }

HTML：

<form action="/search" class="search" method="get"">
  <input id="submit" value="{searchQuery}" type="submit">
  <label for="submit" class="submit"></label>
  <a href="javascript: void(0)" class="icon"><i class="icon-search"></i></a>
  <input type="search" name="q" id="search" placeholder="Search">
</form>

JavaScript的：

$(".icon").click(function () {
    var icon = $(this),
        input = icon.parent().find("#search"),
        submit = icon.parent().find(".submit"),
        is_submit_clicked = false;

    input.animate({
        "width": "175px",
            "padding": "10px",
            "opacity": 1
    }, 300, function () {
        input.focus();
    });

    submit.mousedown(function () {
        is_submit_clicked = true;
    });

    icon.fadeOut(300);

    input.blur(function () {
        if (!input.val() && !is_submit_clicked) {
            input.animate({
                "width": "0",
                    "padding": "0",
                    "opacity": 0
            }, 200);

            icon.fadeIn(200);
        };
    });
});

Answer 1

这是因为您已经修复了宽度和高度，然后使用了填充，如果您不使用border-box，则会填充框大小。

删除：

overflow: hidden (unnecessary)

添加：

box-sizing: border-box;

变化：

padding: 0 10px;

尽管使用＆＃34;溢出：隐藏＆＃34 ;?如何修复元素内容泄漏

1 个答案: