在chrome下不能显示displayblock或者inlineblock的元素怎么办？-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

在chrome下不能显示displayblock或者inlineblock的元素怎么办？

PHP中文网

Jun 06, 2017 am 09:24 AM

在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><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>

//获取下一个兄弟元素节点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);}

以上就是在chrome下不能显示displayblock或者inlineblock的元素怎么办？，更多请关注php中文网其它相关文章！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

什么是Updater.exe在Windows 11/10中？这是Chrome进程吗？Mar 21, 2024 pm 05:36 PM

你在Windows上运行的每个应用程序都有一个组件程序来更新它。因此，如果你使用的是谷歌Chrome或谷歌地球，它会运行一个GoogleUpdate.exe应用程序，检查是否有更新可用，然后根据设置进行更新。然而，如果您不再看到它，而是在Windows11/10的任务管理器中看到一个进程updater.exe，这是有原因的。什么是Updater.exe在Windows11/10中？谷歌已经为其所有应用程序推出了更新，如GoogleEarth、GoogleDrive、Chrome等。这次更新带来了

crdownload是什么文件Mar 08, 2023 am 11:38 AM

crdownload是chrome浏览器下载缓存文件，就是没下载完的文件；crdownload文件是一种临时文件格式，用于储存从硬盘上下载的文件，它能够帮助用户在下载文件时保护文件完整性，避免受到意外中断或停止的情况。CRDownload文件也可以用于备份文件，它可以让用户保存文件的临时副本；如果在下载时出现意外错误，就可以使用CRDownload文件来恢复已下载的文件。

chrome无法加载插件怎么办Nov 06, 2023 pm 02:22 PM

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。其解决方法如下：1、检查插件是否已正确安装，重新安装即可；2、禁用和启用插件，点击禁用按钮，然后再次点击启用按钮即可；3、清除插件缓存，选择高级选项>清除浏览数据，勾选缓存图片和文件和清除所有Cookies，点击清除数据即可。

解决谷歌浏览器无法打开网页的方法Jan 04, 2024 pm 10:18 PM

谷歌浏览器网页打不开怎么办？有很多小伙伴都喜欢上使用谷歌浏览器，当然也有部分小伙伴在使用的过程中发现自己无法正常的打开网页或者说网页打开的速度很慢，那么遇到这种情况要怎么办呢？下面就和小编来看看谷歌浏览器网页打不开的解决方法吧。谷歌浏览器网页打不开的解决方法方法一为了帮助还没有过关的玩家们，让我们一起来了解一下具体的解谜方法吧。首先，右键点击右下角的网络图标，然后选择“网络和Internet设置”。2、点击"以太网"，接着点击"更改适配器选项"。3、点击”属性“按钮。4、双击打开i

Chrome的插件扩展程序安装目录是什么Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么？正常情况下，Chrome插件扩展程序的默认安装目录如下：1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

如何在Chrome和Edge的所有选项卡中搜索文本Feb 19, 2024 am 11:30 AM

本教程向您展示了如何在Windows的Chrome或Edge中找到所有打开的标签页上的特定文本或短语。有没有办法在Chrome中所有打开的标签页上进行文本搜索？是的，您可以使用Chrome中的免费外部Web扩展在所有打开的标签上执行文本搜索，无需手动切换标签。一些扩展如TabSearch和Ctrl-FPlus可以帮助您轻松实现这一功能。如何在GoogleChrome的所有选项卡中搜索文本？Ctrl-FPlus是一个免费的扩展，它方便用户在浏览器窗口的所有选项卡中搜索特定的单词、短语或文本。这个扩