小编Mar*_*ioD的帖子

看看这张图片:

正如您所看到的,2个端点链接突破了锚点容器.

这只发生在iPad上(使用模拟器进行测试).

在桌面上,它可以通过打破其他链接中的单词来表现,从而允许更多空间来分发剩余的项目.

就像ios不知道如何正确破坏第一个链接中的文本一样.

.nav-section {
  padding: 0 30px;
}
.nav-section__list {
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto;
}
.nav-section__item {
  padding: 0 20px;
}

.nav-section__link {
  display: block;
  background: red;
}

<nav class="nav-section">
  <div class="nav-section__list">

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAA AAAA-AAAAAAAA AAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAA AAAAAAAA AAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAA</a>
    </div>

  </div>
</nav>

更新

• word-break: break-all 不是一个有效的解决方案:

• word-wrap: break-all 也不起作用:

这是相同的分辨率,但在桌面上:

正如你所看到的那样,单词破解的方式完全不同.iPad只是不想合作.

更新2

我在另一个flexbox实例中遇到了同样的问题.似乎IOS仍然有一些实施的错误.

所以我继续使用 …

我正在使用Google地图突出显示使用Fusion Tables抓取几何图形的一些国家/地区.你可以在这里看到一个例子:

http://jsfiddle.net/4mtyu/689/

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: locationColumn,
    from: tableId,
    where: "ISO_2DIGIT IN ('AF','AL','DZ','AD','AO','AG','AR','AM','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BT','BO','BA','BW','BR','BN','BG','BF','BI','KH','CM','CA','CV','CF','TD','CL','CN','CO','KM','CG','CD','CR','HR','CU','CY','CZ','DK','DJ','DM','DO','EC','EG','SV','GQ','ER','EE','ET','FJ','FI','FR','GA','GM','GE','DE','GH','GR','GD','GT','GN','GW','GY','HT','HN','HU','IS','IN','ID','CI','IR','IQ','IE','IL')"
  },
  options : {suppressInfoWindows:true},
  styles: [{
    polygonOptions: {
      fillColor: "#000000",
      strokeWeight: "0",
      fillOpacity: 0.4
    }
  }]
});

当我尝试从表中抓取太多项目时,问题就开始了.Google使用包含所有查询值的网址来获取所需的数据,并且通过URL编码,它可以变得非常大.

如果打开控制台并检查错误中引发的URL,您可以在此处看到URL的示例:

http://jsfiddle.net/4mtyu/690/

它在该特定示例中生成的URL是3749个字符,超过了2048个字符限制.

有没有人有任何想法,我可以阻止URL变大,但同时仍然能够选择150多项？

运行下面的代码片段-单击圆圈以切换动画。应该发生的是，当父容器缩放时，子级应该看起来好像没有移动。

这可以通过按放大父级的相同比例缩小子级分量（父级缩放到4，子级缩放到0.25）来实现。

动画制作完成后，缩放比例是正确的，但是在动画制作过程中，它们似乎并没有一起缩放。

几乎就像父级先缩放，然后完成子级缩放一样。

这是某种浏览器限制吗？还是我做错了什么？

谢谢！

const outer = document.querySelector('.outer');

outer.addEventListener('click', () => {
  outer.classList.toggle('outer--active');
});

body { overflow: hidden; }

.outer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  transition: transform 1s;
  cursor: pointer;
  border: 1px solid black;
}

.outer--active {
  transform: scale(4) translate(-50%, -50%);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg') center repeat;
  transform-origin: …

我想知道当变量需要在同一模块中的多个函数中使用时,防止变量为全局的最佳方法是什么.

正如你所看到的那样,我需要在整个过程中提供这些变量 - 但是我并不一定希望在全局中定义这些变量,因为最终会把事情搞得一团糟.我将它们包装在一个函数中吗？

此外,如果有人提出改进此代码的方法,我很乐意听到它.

这是我的代码示例:

// Info Bullet Slide Out

var slideOut,
    clickedButton,
    clickedParent,
    activeClass = 'is-active',
    openClass = 'is-open';

    function closeSlideOut(){
      $('.tlx-img-point').removeClass(activeClass);
      slideOut.removeClass(openClass);
      clickedParent.removeClass(activeClass);
    }

    function openSlideOut(){
      slideOut = $('.' + clickedButton.attr('id'));
      slideOut.addClass(openClass);
      clickedParent.addClass(activeClass);
      clickedButton.addClass(activeClass);
    }

$('.tlx-img-point').on('click', function(){
  clickedButton = $(this);
  clickedParent = clickedButton.parent();

  // If you clicked on the same button twice just close the slideout
  if($(this).hasClass('is-active')){
    closeSlideOut();

  // If you clicked on another info button close this one and open the new one
  }else if(clickedParent.hasClass(activeClass)){
    closeSlideOut(); …