※Pure の letter-spacing がおかしくなるケースは
使用方法に問題があり、表示が乱れていました。
ここに書いてある回避方法は必要ありませんでした。

概要

FlexSlider を CSS フレームワークで使用した場合、スライドショーを前へ、次へとするめる、
directionNav の表示がおかしくなりました。

FlexSlider の directionNav は、Web フォントを利用して、文字でナビゲーションの矢印を表現しています。
文字で表現しているため、CSS フレームワークのスタイルが影響して表示がおかしくなっていたようです。

今回試した CSS フレームワークは次のとおり。

表示がおかしくなるケースは、2 パターンありました。

line-height がおかしくなるケース

directionNav が表示される、
.flexslider > ul > li > a の line-height
の値が予期しない値になって表示が崩れていました。

原因はそれぞれ次のとおり。

bootstrap は、li タグの line-height を 20px に指定していました。

bootstrap.css

li {
    line-height: 20px;
}

Foundation は ul タグの line-height を 1.6 に指定していました。

foundation.css

ul,
ol,
dl {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 1.25em;
  list-style-position: outside;
  font-family: inherit; }

この表示を修正するために、Bootstrap、Foundation の line-height をそれぞれ調整しました。

Bootstrap の修正例

.flexslider ul li {
    line-height: normal;
}

Foundation の修正例

.flexslider ul {
    line-height: normal;
}

最終的には a の line-height が問題なので、
Bootstrap、Foundation どちらとも

.flexslider ul li a {
    line-height: normal;
}

のように修正しても表示が正しくなります。

※以下の内容は、フレームワークの使用方法が間違っていたためにおこっていました。
グリッドの指定に <div class="pure-u-1-1"> としていましたが、
正しくは、<div class="pure-u-1"> でした。

directionNav が表示される、
.flexslider > ul > li > a の letter-spacing
の値が予期しない値になって表示が崩れていました。

Pure では次のように letter-spacing を指定していました。

pure-min.css

..pure-g-r {
    letter-spacing: -0.31em;
}

この表示を修正するために、次のようにしました。

.flexslider {
    letter-spacing: normal;
}

最終的には、.flexslider > ul > li > a の letter-spacing が正しい値になればよいので、
ul、li、a のいずれに letter-spacing: normal; を指定しても正しく表示されます。

以上で、FlexSlider のスライドショーが Bootstrap、Foundation、Pure で正しく表示されるようになりました。