上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框

 <p>
<span><i>收货人:</i>{remark.name}</span>
<span><i>收货手机号:</i>{remark.phone}</span>
<span><i>收货地址:</i>{remark.address}</span>
<span><i>支付时间:</i>{remark.payTime}</span>
</p>

一般是由于行内元素之间在换行时会产生一个换行符号,然后会占用一定的宽度,并且这个宽度是小于一个空格的.

解决方法如下:

1.将span元素写在一行,但是较多的话看着就不方便了;

2.js里拼接字符串,再用innerHtml显示出来, 使用一些组件就不好拼接了;

3.将换行元素的父元素字体大小设为:font-size:0 ,前提是得浏览器支持这个属性;

4.这样写:

 <p>
<span><i>收货人:</i>{remark.name}</span
><span><i>收货手机号:</i>{remark.phone}</span
><span><i>收货地址:</i>{remark.address}</span
><span><i>支付时间:</i>{remark.payTime}</span>
</p>

然而,我遇到的bug不一般,用以上的方法统统无效,为啥呢 ???

原来是因为我的span与i标签之间看似没有空格,实则有个隐形的的空格(就是按左右键得两下才能移过那个小箭头),

于是,把span标签重写一遍就好啦,莫名的小空格~~~

span i s等行内元素标签之间出现奇怪空格符号的更多相关文章

  1. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  2. img 默认是行内元素,它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

  3. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  4. Html行内元素和块级元素

    1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  5. html块级元素与行内元素

    1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  6. 为什么transform对行内元素不生效

    注:赶时间的同学可直接下拉到底,看结论. 我使用transform对一个元素进行位移,代码如下: <div class="box"> <span>今天你吃了 ...

  7. CSS中的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  8. CSS块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  9. HTML span标签:用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

随机推荐

  1. 编写高质量代码:改善Java程序的151个建议 --[26~36]

    提防包装类型的null值 public static int testMethod(List<Integer> list) { int count = 0; for (Integer i ...

  2. vue学习(2)

    node.js介绍与npm操作 1.node就是JavaScript的一个运行环境(平台),他不是一门语言,也不是JavaScript框架,可以用来开发服务器端应用程序,web系统,其特点是体积小.快 ...

  3. 记一次 HTTP信息头管理器使用 的重要性

    今天在测试中遇到了一个问题 使用JMeter时请求相关地址参数及方法都填写正确,但是相应数据返回始终不对,例如 查看取样器结果显示 200 正常,但响应数据不符合正常的结果. 经反复检查发现问题如下: ...

  4. Go语言(IDEA下+Eclipse下)Hello World

    第一步,去下载Go环境 然后安装即可. IDEA 先安装GO插件: ..点击Browse... ..搜索GO ..点击安装,安装完之后重启 ..重启完之后,New~(IDEA已经自动识别出系统中安装的 ...

  5. Tomcat第一个站点介绍

    背景 在讨论如何组织源码目录之前,很有必要对现有web站点的组织结构进行测试,特别是2.2版本的API,在服务器版本上是不同的,所以在2.2之后的版本中,所有的服务器版本都要求能够使用标准的压缩web ...

  6. Vue(基础七)_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  7. https服务器配置部署

    现在很多网站都要是https,包括我之前做的微信小程序都是需要使用https传输的,特将之前学习的记录下,以防忘记 一. 1.HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL / T ...

  8. ajax传值修改数据

    主界面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. 如何在Mac上安全彻底的卸载软件?

    文章来源:知乎 收录于:风云社区(SCOEE)[提供mac软件下载] 更多专题,可关注小编[磨人的小妖精],查看我的文章,也可上[风云社区 SCOEE],查找和下载相关软件资源. (一)综合类: 新买 ...

  10. as报错

    android studio报错报错一:Could not HEAD 'https://dl.google.com/dl/android/maven2/com/android/tools/build/ ...