What should I do if displayblock or inlineblock elements cannot be displayed under chrome?-HTML Tutorial-php.cn

What should I do if displayblock or inlineblock elements cannot be displayed under chrome?

PHP中文网

Release： 2017-06-06 09:24:07

Original

2211 people have browsed it

What should I do if a display: inline-block or display: block element cannot be displayed normally under chrome?
The DEMO page has only one input box. When the input box has focus, the height becomes larger, and the word count display and reply button are displayed. .
The problem now is that Chrome can only click the input box after the first refresh and the height will increase and display the word count display and reply button elements. However, if you click the input box for the second time, only the height will increase, but you will not see it. Let’s get to the word count display and reply button elements (firefox is normal)

<head>
<meta charset="UTF-8">
<title>案例：人人网评论功能</title>
<style>.comment-input{width: 450px;}.input-area{outline: 0;border: 1px solid black;width:446px;height: 15px;}.input-area_expand{height: 45px;}.input-action{display: none;}.input-action_show{height: 26px;width: 102px;display: inline-block;
//这里display: block都试过了，只能在第一次刷新的时候看到，再点击第二次输入框就看不到了float: right;}
</style></head><body><p class="comment-input" style="border:1px solid red">
<textarea class="input-area"   >
评论……</textarea><p class="input-action" style="border:1px solid red"><span class="inputed">0</span>/<span class="maxlength">140</span><a href="javascript:void(0)" class="reply-btn">回复</a></p></p></body>

Copy after login

//获取下一个兄弟元素节点function getNextElement(node)
{      if(node.nodeType == 1){          return node;      }      
if(node.nextSibling){          return getNextElement(node.nextSibling);      }      
return false;}   document.getElementsByClassName(&#39;input-area&#39;)[0].onfocus = function() 
{this.className = &#39;input-area input-area_expand&#39;var nextEl = getNextElement(this.nextSibling);
nextEl.className = &#39;input-action input-action_show&#39;;this.value = &#39;&#39;;
console.log(&#39;focus:&#39;+nextEl.className)}document.getElementsByClassName(&#39;input-area&#39;)[0].onblur = function() {var nextEl = getNextElement(this.nextSibling);nextEl.className = &#39;input-action&#39;;this.className = &#39;input-area&#39;this.value = &#39;评论……&#39;;console.log(&#39;blur :&#39;+nextEl.className);}

Copy after login

What should I do if the displayblock or inlineblock elements cannot be displayed under chrome? , please pay attention to other related articles on the php Chinese website for more information!