在chrome下不能正常显示一个displayblock或者inlineblock的元素怎么处理
日期：2014-05-16 浏览次数：20613 次
在chrome下不能正常显示一个displayblock或者inlineblock的元素怎么办
在chrome下不能正常显示一个display: inline-block或者display: block的元素怎么办
DEMO页面只有一个输入框，当输入框有焦点时高度变大，并且显示 字数显示和回复按钮。
现在问题是，chrome只能在第一次刷新之后点击输入框然后高度变大并显示 字数显示和回复按钮的元素，但是再点击第二次输入框就只有高度变大，却没有看到字数显示和回复按钮的元素了（firefox正常）
------解决方案--------------------
那就不知道什么原因了，清缓存试试吧。
在chrome下不能正常显示一个display: inline-block或者display: block的元素怎么办
DEMO页面只有一个输入框，当输入框有焦点时高度变大，并且显示 字数显示和回复按钮。
现在问题是，chrome只能在第一次刷新之后点击输入框然后高度变大并显示 字数显示和回复按钮的元素，但是再点击第二次输入框就只有高度变大，却没有看到字数显示和回复按钮的元素了（firefox正常）
<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>
<div class="comment-input" style="border:1px solid red">
<textarea class="input-area" >评论……</textarea>
<div 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>
</div>
</div>
</body>
//获取下一个兄弟元素节点
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return false;
}
document.getElementsByClassName('input-area')[0].onfocus = function() {
this.className = 'input-area input-area_expand'
var nextEl = getNextElement(this.nextSibling);
nextEl.className = 'input-action input-action_show';
this.value = '';
console.log('focus:'+nextEl.className)
}
document.getElementsByClassName('input-area')[0].onblur = function() {
var nextEl = getNextElement(this.nextSibling);
nextEl.className = 'input-action';
this.className = 'input-area'
this.value = '评论……';
console.log('blur :'+nextEl.className);
}
------解决方案--------------------
那就不知道什么原因了，清缓存试试吧。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
