HTML+CSS：临摹电商网站解决兼容性问题以及心得

临摹电商网站过程中，难免会遇到各种浏览器不兼容样式的问题。
我的ie浏览器是ie11，因此还是很大部分可以兼容的。

但是在ie6上兼容则不是那么好了。
接下来主要是说说我遇到的问题以及不兼容的地方和解决方法。

---

星号居中文字并紧邻文字

如图可以看到星号是紧邻着文字的，所以无法使用背景来设置星号的位置。
但我发现为了居中文字，需要使文字和星号分装在两个容器中，令装有星号的vertical-align：middle与装有文字的容器对齐。
再设置星号的行高等于文字容器的高度即可。

---

制作热标

这种小热标的制作方法主要是依靠一个元素包裹另一个元素以及使用绝对定位。
HTML如下

<div class="degree">4.7<i></i></div>

div主要设置长方形大小和文字样式，i则是设置后面的小三角形（三角形的制作在前面的一篇文章中）。再通过设置div为相对定位，i为绝对定位来将小三角形放在想放的地方。

---

横向放置banner图片但同一时间只显示一张

效果如图

HTML结构如下

<!-- 设置只有一张图片的宽高并overflow：hidden -->
<div class="banner">
<!-- 放置图片 其宽为所有图片的宽的和 -->
    <div class="banner_img">
        <img src="images/banner/banner1.png" alt="first">
        <img src="images/banner/banner3.png" alt="second">
        <img src="images/banner/banner1.png" alt="third">
    </div>
    <div class="toggle_btn">
        <a class="active"></a>
        <a></a>
        <a></a>
    </div>
</div>

banner设置相对定位，而banner_img设置绝对定位。这里主要是为了等下还有个a标签制作的滑动块。
banner_img里的所有图片都float：left。这样全部图片都会跑到左边去了。
滑动块a的居中可以：将包含a的容器div设置为绝对定位，并设置其bottom以及text-align:center来使其位于底部并居中。

---

兼容问题

在chrome下的字体正常 但是到了IE和火狐则会显示小字

如图


主要的原因我上网查了一下

所以em和rem作为字体大小的单位是最合适的，可以兼容多浏览器。
em
em单位是相对包裹自己的元素的字体大小来设置的，若没有设置父元素的字体大小，则相对于浏览器的默认字体大小来设置。
浏览器的默认大小为16px，若我们想让em和px联系起来：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
或者：
先把body的font-size改为62.5%即10px，此时你应该设置的em值就是px值/10。
我在此处使用的是第二种方法，效果如下：