这段时间一直做微信小程序，过程中遇到了一个问题，这个问题一直没有得到完美的解决。

问题描述：

　　在Web编程中经常会引入template插件，这个插件是封装好，我们通常的做法是直接引入，配置简单，好用，一直都没出现什么大问题。但是这次在微信小程序上，问题就出现了。

因为手机屏幕普遍和PC比小很多，template正常情况下我们给content一个padding：1 30rpx 40rpx 30rpx;时富文本内容在手机屏幕上显示时两边有留白，页面会好看，也为了用户手握手机是不回方便看文本。

　　文本内容设置padding后就成功，但是image在其中就超出屏幕显示区域了（如下图）

严重影响页面展示！

为了解决这个问题，我前后断断续续用了三四天时间；解决办法其实很简单！

我在控制台中查看image的样式，最不明白的就是element.style (如图)

看见图中的width：365px；这是怎么设置的，我猜应该是js代码动态生成的，上网一查，果不其然这是js文件根据不同的屏幕尺寸动态设置的image宽度。怎么办？我难道要去找那段js代码吗？这样工作可想而知

那怎么解决呢？

element.style根本就不存在啊！

办法很就是：！important

没错，这个东西的作用就是提高指定CSS样式规则的应用优先权。

就是说：这个东西可以覆盖掉element.style里面的属性

于是我就增加了这段代码：

这个问题就解决了！

最后：具体这个js代码在哪我也没有去深究，问题也算解决了！现在就好了（如图）；

微信小程序template富文本插件image宽度被js强制设置的更多相关文章

  1. 微信小程序开发--富文本插件wxParse的使用

    昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...

  2. 微信小程序之富文本解析

    亲身体验 wxparse 是个坑,弃之不用 微信小程序的 <rich-text>标签挺好用的 用法如下: 1.wxml页面 <rich-text nodes="{{node ...

  3. 处理后台传过来的json数据-显示到微信小程序的富文本里

    解析数据: JSON.parse(); 获取 加密的文章内容, 将解密文章内容, 将解密后的img标签的路径换成绝对地址(服务器) 调整图片的大小,

  4. 微信小程序简易富文本

  5. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  6. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  7. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  8. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

  9. 微信小程序——表单验证插件WxValidate的二次封装（终极版）

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

随机推荐

  1. C语言程序设计（四） 键盘输入和屏幕输出

    第四章 键盘输入和屏幕输出 转义字符 \n 换行,光标移到下一行的起始位置 \r 回车(不换行),光标移到当前行的起始位置 \0 空字符 \t 水平制表 \v 垂直制表 \b 退格 \f 走纸换页 \ ...

  2. 推荐一个学习python非常好的网站

    推荐一个入门python非常好的网站(也可以学习JAVA)非常适合入门,不说多易于理解,也是比较亲民的0基础学习教程,还免费…… 网址:https://www.liaoxuefeng.com/(廖雪峰 ...

  3. Python 装饰器（无参，有参、多重））

    Python装饰器介绍 在Python中,装饰器(decorator)是在闭包的基础上发展起来的. 装饰器的实质是一个高阶函数,其参数是要装饰的函数名,其返回值是完成装饰的函数名,其作用是为已经存在的 ...

  4. Hadoop集群搭建(六)~安装JDK

    前面集群的准备工作都做完了,本篇记录安装JDK,版本位1.8 1,在opt目录下创建software和module文件夹:software用来放安装包,module为安装目录 2,把JDK和hadoo ...

  5. 《Java8 Stream编码实战》正式推出

    ​当我第一次在项目代码中看到Stream流的时候,心里不由得骂了一句"傻X"炫什么技.当我开始尝试在代码中使用Stream时,不由得感叹真香. 记得以前有朋友聊天说,他在代码中用了 ...

  6. 【JAVA进阶架构师指南】之二：JVM篇

    前言   谈到JAVA,就不得不提JVM---JAVA程序员绕不开的话题.也许有童鞋会说,我不懂JVM,但是我一样可以写出JAVA代码,我相信说这种话的童鞋,往往是只有1-3年的初级开发人员,对JAV ...

  7. 一般人不知道的Flask框架SQLAlchemy的那些事

    目录 SQLAlchemy 1.介绍 2.简单使用(能创建表,删除表,不能修改表) 3.一对多关系 4.多对多关系 5.操作数据表 6.基于scoped_session实现线程安全 7.基本增删查改 ...

  8. Python3 分数

    limit_denominator()定义:通过限制分母的大小来取一个近似值提高精度.格式:fractionobject.limit_denominator('分母最大值') denominator定 ...

  9. 图-最短路-dijkstra-0/1BFS-1368. 使网格图至少有一条有效路径的最小代价

    2020-03-01 22:59:59 问题描述: 给你一个 m x n 的网格图 grid . grid 中每个格子都有一个数字,对应着从该格子出发下一步走的方向. grid[i][j] 中的数字可 ...

  10. 翻转-Flip Columns For Maximum Number of Equal Rows

    2020-02-20 11:00:06 问题描述: 问题求解: 翻转题一个常见的思路就是站在结束的状态来反推最初的状态,本题的解题思路就是站在结束的时候的状态来进行反推. 如果在最终的状态i-row是 ...