css小问题整合

发表于 | 分类于 | | 阅读次数

css 小问题整合

@(我的第一个笔记本)[圆角, 三角, 透明度, 响应式表格, 手机浏览器不出现滚动条, 滚动条问题]

记录 开始

处理兼容圆角：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-moz-border-radius:5px;
-webkit-border-radius:5px;
position:relative;behavior:url(pie.htc);
border-radius:5px;

border-top-left-radius:30px;
border-bottom-left-radius:30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
-moz-border-top-right-radius:30px;
-moz-border-bottom-left-radius:30px;
-moz-border-top-left-radius:30px;
-moz-border-bottom-right-radius:30px;
-webkit-border-top-right-radius:30px;
-webkit-border-bottom-left-radius:30px;
-webkit-border-top-left-radius:30px;
-webkit-border-bottom-right-radius:30px;
position:relative;behavior:url(pie.htc); border-radius:30px;

三角形实现：

1
2
3
width: 0;height: 0;border-top: 5px solid transparent;
border-left: 8px solid #fff;
border-bottom: 5px solid transparent;

透明度兼容问题：

1
2
3
4
5
background-color:#0000CC;
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
opacity:0.5;
-webkit-opacity:0.5

响应式表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<div class="table-responsive biaoge">
            <table class="table table-bordered text-center">
               <thead>
                  <tr>
                     <th>时间</th>
                     <th>DAY1</th>
                     <th>DAY2</th>
                     <th>DAY3</th>
                     <th>DAY4</th>
                     <th>DAY5</th>
                     <th>DAY6</th>
                     <th>DAY7</th>
                  </tr>
               </thead>
               <tbody>
                  <tr class="s_one">
                     <td>8:00-9:00</td>
                     <td class="mix" rowspan="4">11:00之前在新东方水清木华校区<br/>乘坐班车前往校区</td>
                     <td>晨读</td>
                     <td>晨读</td>
                     <td>晨读</td>
                     <td>晨读</td>
                     <td>晨读</td>
                     <td>晨读</td>
                  </tr>
                  <tr class="s_two">
                     <td>9:00-10:00</td>
                     <td>[中教]晨读</td>
                     <td>[中教]晨读</td>
                     <td>[中教]晨读</td>
                     <td>[中教]晨读</td>
                     <td>[中教]晨读</td>
                     <td>[中教]晨读</td>
                  </tr>

手机浏览器不出现滚动条的问题：

解决方案：引用插件库：iscroll.js文件

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
 var myScroll;
 function loaded() {
    myScroll = new iScroll('wrapper');
 }
 document.addEventListener('DOMContentLoaded', loaded, false);

 window.onload = function() { 
    setTimeout(function(){ new iScroll(document.getElementById('scroller')) }, 100) 
 };
</script>

滚动条问题：

http://www.jq22.com/jquery-info1425
http://www.webhek.com/scrollbar

换行总结：

1、
word-wrap: break-word;和word-break: break-all;的区别

word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

word-break是控制是否断词的。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

2、

记住respond.js只有在线上才不会有ie中的错误；

漂亮的虚拟滚动条
http://www.jq22.com/jquery-info1425
第二种方法：
http://www.webhek.com/scrollbar