主页 / 问题 / 587942
Accepted
Илья Бизунов
Asked:2020-11-07 21:54:15 +0000 UTC2020-11-07 21:54:15 +0000 UTC

在 AngularJS 项目中缩小 HTML 的问题

  • 772

有这个 HTML：

<div class="footer">
    <div class="tools">
        <a role="button" class="material-button" href="{{item.url}}" target="_blank">
            <i class="icon fa fa-file-text"></i> Запись
        </a>
        <button type="button" class="material-button" ng-click="copyPost(item)">
            <i class="icon fa fa-clipboard"></i> Копировать
        </button> 
        <share url="{{item.url}}" title="{{item.source.name}}" description="{{item.text}}"></share>
    </div>
</div>

共享组件 HTML 模板：

<div class="share-block">
    <a class="material-button share vk" target="_blank" href="{{vk}}"><i class="fa fa-vk"></i></a>
    <a class="material-button share fb" target="_blank" href="{{fb}}"><i class="fa fa-facebook"></i></a>
    <a class="material-button share ok" target="_blank" href="{{ok}}"><i class="fa fa-odnoklassniki"></i></a>
    <a class="material-button share gp" target="_blank" href="{{gp}}"><i class="fa fa-google-plus"></i></a>
</div>

在浏览器中它看起来像这样： 在此处输入图像描述

缩小 HTML 后，它看起来像这样： 在此处输入图像描述

据我了解，这是由于在缩小过程中删除了空格。我查看了生成的缩小 HTML 以找出答案。通常，令我惊讶的是，共享组件中的 <a> 标记之间有空格。div 中的 <a> 和 <button> 标签之间tools没有空格。

向我解释这里的逻辑在哪里，如何解决这个问题？毕竟，理论上，那里应该有一个空格，因为它在 <a> 标记之间的共享组件中。

Grunt，grunt-angular-templates。

html

2 个回答

  1. 重置内联块元素的默认边距，例如在 CSS 中设置 margin-right: 4px

    .material-button {
  display: inline-block;
  margin-right: 4px;
}

    更新。可以肯定的是，您也可以通过评论重置边距

    <a class="material-button"></a><!--
--><a class="material-button"></a>
    • 0
  2. Best Answer

    一般来说，我发现的唯一或多或少正常的解决方案如下。我们为整个页面设置font-size: 0：

    body {
  font-size: 0;
}

    接下来，在我们使用文本的任何地方，设置所需的字体大小：

    .text {
  font-size: 16px;
}

    在这种情况下，我们解决了 HTML 标记和 CSS 中的空格问题。组装前后页面看起来一样。

    • 0

相关问题