IE下textarea中font-size值很大时,文字不显示的问题的解决办法

在IE下,我们写一个固定高度和宽度的textarea,给一个select,可以选择字体大小并作用于textarea。

在非IE浏览器下,textarea原始字号为18px,将这个textarea中的文字的font-size改为108时是这个样子的:


但是在IE下确是这个样子的:


在网上找解决方法,不过貌似很少有人遇到这种情况,于是一个一个组合css去试,最终找到了一个解决方法,不过导致这种情况的原因至今不详。

解决方法:

在IE浏览器下,在将font-size改为108px之后,将textarea的宽度设为0,然后再设回原来的宽度即可。

我猜测的原因是在原始的宽度中,将字体变得很大,IE浏览器对字体所占的宽度的计算有bug。

然而将宽度设为0之后,再设为原始宽度,则IE浏览器会重新计算一次字体的宽度,此时就正常了。

具体的javascript代码如下:

var width = $("textarea").css("width");
$("#txt-area").css("width", "0%");
setTimeout(function () {
  $("#txt-area").css("width",width);
}, 20);
如果这里不延迟20秒设回原来的高度,也会在某些情况下失败,具体原因有待考证。

`c-textarea` 是一个在某些前端框架或组件库的自定义组件,用于创建文本输入区域。通常,这样的组件会封装一些额外的功能,比如文本计数、只读模式、自动大小调整等。当您提到“获取字段后显示,打开窗口后,更新不及”的情况,可能是指在使用 `c-textarea` 组件,组件的显示内容并没有即反映后端数据的变化。 要解决这个问题,首先需要确定是在什么样的前端框架下使用 `c-textarea` 组件,比如Vue、React等。不同的框架有不同的数据绑定机制。但一般情况下,可以尝试以下步骤: 1. 确保组件的 `value` 属性与数据源建立了正确的一致性关系,比如在Vue通常是通过 `v-model` 指令绑定。 2. 如果更新操作是异步的(如通过Ajax调用后端接口),确保在数据返回并更新了相应数据后,组件能够根据新的数据重新渲染。 3. 检查是否有其他JavaScript代码或第三方库影响了 `c-textarea` 的正常显示。 举个例子,在Vue,你可能需要像这样使用 `c-textarea` 组件: ```html <c-textarea v-model="textareaValue"></c-textarea> ``` ```javascript export default { data() { return { textareaValue: '' }; }, mounted() { // 假设从后端获取数据并更新textareaValue this.fetchDataFromServer(); }, methods: { fetchDataFromServer() { // 模拟异步获取数据 setTimeout(() => { this.textareaValue = '从服务器获取的新内容'; }, 1000); } } }; ``` 如果以上方法不能解决问题,可能需要具体分析组件的实现和使用上下文来找出原因。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值