|
1 |
html, body { height: auto; } |
Reference:
Category Archives: CSS
Bootstrap Modal Issues
Width:
If the width of modal is too wide, check the following possible reasons:
- If there is any long text string is not broken to new line.
- Image width without max-width
- iframe (e.g. embeded youtube video)
CSS Issues in iphone
如果不是RWD，Fixed Menu會沒辦法完整顯示
Solution: 用JS判斷window寬度，把fixed改成static
|
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 |
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <meta name="viewport" content="width=1080"> <style> body.mobile{ padding-top:0; } body.mobile header{ position: static; min-width: 980px; } </style> <script> $(document).ready(function(){ $(window).resize(function(){ var w = $(window).width(); //console.log(w); if(w <= 1080){ $('body').addClass('mobile'); }else{ $('body').removeClass('mobile'); } }); }); </script> |
iPhone會自動調整文字的大小，有時候內文的字型會比標題還大
Solution:
|
1 2 3 |
body{ -webkit-text-size-adjust: 100%; } |
table-cell will cause weird padding of a td
In table, if the CSS value of “display” is “table-cell”, and a image within, there will be a weird padding under the image. Refer to the green lines:
https://jsfiddle.net/RexLo/1hdxob6s/1/
Solution:
Set the display value of the image to “block”:
|
1 |
display: block; |
Reference:
- DOCTYPE is causing the image to display as an inline element.
http://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows
body overflow issue
body overflow hidden, 要附加 -webkit-overflow-scrolling: touch, 不然手機看會以為壞掉了，卡卡的
figure 不是取代 image tag，在這裡使用image就好
Text-align bug on iphone (思源體)
用思源體時在iphone會發生字型不會對齊的Bug!!
Import (Link) CSS File
|
1 |
<link rel=stylesheet type="text/css" href="css/style.css"> |
Text overflow – auto append “…”
|
1 2 3 |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
favicon
|
1 |
<link rel="icon" href="demo_icon.png" type="image/png" /> |
Reference:
Add image in “::before” or “::after”
|
1 2 3 4 5 6 7 |
.ModalCarrot::before { content:''; background: ('blackCarrot.png');/*url of image*/ height: 16px;/*height of image*/ width: 33px;/*width of image*/ position: absolute; } |
http://stackoverflow.com/questions/6668577/using-before-css-pseudo-element-to-add-image-to-modal