2022.1.9日报：修复input placeholder导致位置不准的问题

最新推荐文章于 2024-06-12 08:00:00 发布

龙泉寺扫地僧

最新推荐文章于 2024-06-12 08:00:00 发布

阅读量869

点赞数

文章标签： css elementui html

本文链接：https://blog.csdn.net/weolar/article/details/122390928

版权

1，测试代码如下：

<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>新建标签页</title>

    <link href="css/chunk-vendors.c98dfc91.css" rel="stylesheet">
    <link href="css/browser.6f94aa46.css" rel="stylesheet">
  </head>
  
  <body onselectstart="return false;">
    <div data-v-615293b9="" class="browserVue">
      <div data-v-615293b9="" class="addressSty">

        <div data-v-615293b9="" class="addressCenter">
          <div data-v-615293b9="" class="inputBox">
            <input data-v-615293b9="" placeholder="搜索或输入Web地址" size="small" maxlength="1000" spellcheck="false">

          </div>
        </div>

      </div>
    </div>

  </body>

</html>

body,html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden
}

.browserVue .addressSty[data-v-615293b9] {
	width: 100%;
	height: 50px;
	/*line-height: 31px;*/
	padding: 3px 0;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc
}

.browserVue .addressSty .addressCenter .inputBox[data-v-615293b9] {
	width: 100%;
	height: 30px;
}

/*!!!!!!!!!!!!!!!!!!!*/
.browserVue .addressSty .addressCenter .inputBox input[data-v-615293b9] {
	width: 300px;
	height: 100%;
	border: 0;
	outline: none;
	display: block;
	background: #f1f3f4;
	overflow: hidden; /*!!!!!!!!!!!!!!!!!!!*/
}

input {
	/*line-height: inherit*/
	line-height: 41px;
}

发现mb57版本是好的。对比了一下流程，发现mb57在LayoutTextControlSingleLine::createInnerEditorStyle这多了textBlockStyle->setLineHeight的第二次设置。另外默认的html.css也多了句input::-webkit-input-placeholder的line-height: initial;设置。