1. 程式人生 > >h5 bug 小結

h5 bug 小結

表格佈局

.index_tab {
		width: 100%;
		margin-bottom: 80px;
	}
.index_tab td {
	width: 49%;
	height: 2.3rem;
	background: white;
	text-align: center;
}
/*偶數*/

.index_tab td:nth-child(even) {
	border-bottom: 0.15rem solid #ececec;
}
/*基數*/

.index_tab td:nth-child(odd) {
	border-bottom: 0.15rem solid #ececec;
	border-right: 0.15rem solid #ececec;
}

.index_tab td img {
	height: 45px;
	margin-top: 20px;
}

最後一個孩子的css

.table .tr {
  display: flex;
  width: 100%;
  justify-content: center;
  padding:10px 0;
  align-items: center;
  border-bottom:1px solid #999;
}


.table .tr:last-child{
  border-bottom:none;
}

下載pdf檔案

<a href="001.pdf" download>adsfadsfa</a>

iframe巢狀html 之 iframe滾動問題

<body style="overflow: hidden;">
<iframe src="" name="childframe" id="childframe"
 scrolling="no" width="100%" frameborder=0></iframe>

<script type="text/javascript">
window.onload = function() {
    var w = document.body.scrollWidth;
    var hh = window.screen.height; //高度
    $('#childframe').css("height", w + "px");
    $('#childframe').css("height", hh + "px");
    document.body.style.height = hh + "px";
};

Hbuilder快捷鍵

div.list{$}*5
ul>li*5>a[href="###"]{按鈕$}

inline-block 區別 float##

inline-block: 水平排列一行,即使元素高度不一,也會以高度最大的元素高度為行高,
即使高度小的元素周圍留空,也不回有第二行元素上浮補位。
ex:
	<style type="text/css">
		#myDiv{
			width: 500px;
			height: 300px;
			background: green;
		}
		#myDiv_1{
			width: 200px;
			height: 150px;
			background: palegoldenrod;
			display: inline-block;*********
		}
		#myDiv_2{
			width: 200px;
			height: 100px;
			background: firebrick;
			display: inline-block;
		}
		#myDiv_3{
			width: 10px;
			height: 20px;
			background: fuchsia;
			display: inline-block;
			
		}
	</style>
	</head>
	<body>
		<div id="myDiv">
			<div id="myDiv_1"></div>
			<div id="myDiv_2"></div>
			<div id="myDiv_3"></div>
		</div>
	</body>

float: 
讓元素脫離當前文件流,呈環繞裝排列,如遇上行有空白,
而當前元素大小可以擠進去,這個元素會在上行補位排列。預設是頂部對齊。

float 區別 position##

float:不是完全脫離文字流, 而且底部的文字, 會環繞當前標籤, 為了防止文字被擋住
position: 徹底脫離文字流, 會擋住後面的東西
ex:
<style>
	#content {
		width: 500px;
		height: 500px;
		background-color: black;
	}
	
	#one {
		width: 100px;
		height: 100px;
		background-color: yellow;
		/*float: left;*/
		position: absolute;
	}
	
	#two {
		width: 200px;
		height: 400px;
		background-color: green;
		color: white;
	}
</style>
</head>

<body>
<div id="content">
	<div id="one">

	</div>
	<div id="two">
		1231321321我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是我是
	</div>
</div>
</body>		

小知識點##


 1. 複製本頁連結
 <input type="text"  id="url" value="http://www.baid.com/">
 
<input type="button" value="copy" onClick="url.select();
	document.execCommand('Copy')">
	
 2. 自定義字型
	@font-face { 
		font-family: "於洪亮硬筆行楷"; 
		src: url("fonts/於洪亮硬筆行楷.ttf"); 
	}     
	#content{	
	    font-family: "於洪亮硬筆行楷"; 		
	}
	
 3.	input 禁止貼上
	身份證號:<input type="text" />  
	重複輸入<input type="text" 
	onpaste="alert('禁止貼上');return false;" />
	//return false是主要的作用 

 4.文字太長以省略號顯示
 
	 .text {
			text-overflow: ellipsis;
			white-space: nowrap; 
			overflow: hidden;
		}

	white-space是設定文字不換行,overflow設定標籤超出部分自動隱藏

相關推薦

h5 bug 小結

表格佈局 .index_tab { width: 100%; margin-bottom: 80px; } .index_tab td { width: 49%; height: 2.3r

蘋果系統 IOS 12 的H5 BUG :鍵盤把頁面頂上去了,底下留有一塊空白區域

蘋果以往的系統是沒問題的,一般情況下,點選input喚起鍵盤後是會自動顯示到輸入框的地方,然後收起鍵盤頁面就會恢復到底部。 但是如果蘋果是已經更新到最新的IOS12的話就會發生一個BUG ,就是鍵盤喚起後把頁面頂上去,然後把鍵盤收回去後頁面卻回不來了,保持著被頂起的狀態,原本鍵盤的地方留出一塊空白。 BU

IC前端設計bug小結

bug  review會 近幾天公司內部開了個IC設計前端的bug review會議,總結了經常出現的問題,很有意思,特記錄一下。 1. 在驗證的時候,不僅僅只從RTL角度考慮test case,也應該結合應用場景考慮test case。       一方面,應用場景提出

bug排查小結

解決 roc ssl mysq show mysql 引擎 ces 排查 mysql cpu利用率偏高,並且長時間居高不下。 show processlist 發現有一個單表查詢的sql語句出現的頻率比較高, 這個單表查詢中規中矩,where語句中條件都使用&r

解決因為手機設置字體大小導致h5頁面在webview中變形的BUG

大小設置 解決方法 實的 rep style () window 出現 是你 首先,我們做了一個H5頁面,在各種手機瀏覽器中打開都沒問題。我們采用了rem單位進行布局,通過JS來動態計算網頁的視窗寬度,動態設置html的font-size,一切都比較完美。 這時候,你自

關於H5喚起地圖導航小結

專案需求:在H5頁面中跳轉到地圖App,或者在本地App中載入的H5頁面跳轉到地圖App,喚起App進行導航; 1、騰訊地圖: 呼叫方式: http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address

bug】—— H5頁面在 ios 端滑動不流暢的問題

IOS系統的慣性滑動效果非常6,但是當我們對div加overflow-y:auto;後是不會出這個效果的,滑動的時候會感覺很生澀。怎麼辦? 方案一: 在滾動容器內加-webkit-overflow-scrolling: touch 但這個方案有一個問題,在頁面內具有多個overflow:auto的情況下,那些

手機設定字型大小導致h5頁面在webview中變形的BUG

開發微信公眾號,調整微信自帶字型大小後,出現webview變形,網上找到此答案,還沒有驗證過,先存著function htmlFontSize(){ var h =Math.max(document.documentElement.clientHeight, windo

Laya for H5Bug追蹤

min 第三方 轉義 init 相關 ram ref 足夠 debug Laya For H5之Bug追蹤 H5遊戲一旦上線後,如何跟蹤用戶的崩潰日誌呢?現在有很多第三方的工具,比如fundebug,其sdk接入簡單,只需寥寥幾行代碼就可以追蹤h5遊戲的崩潰日誌,bug日誌

C#使用HttpWebRequest進行HTTP請求傳送和接收的一些小結。(新增修復.NET4.0以下關於cookie的bug

2014.11.29 新增HTTPS處理和常用的getMid函式 直接貼程式碼: #region httpUtils private const string DefaultUserAgent = "Mozilla/5.0 (Windows NT 5.1

解決因為手機設定字型大小導致h5頁面在webview中變形的bug

首先,我們做了一個H5頁面,在各種手機瀏覽器中開啟都沒問題。我們採用了rem單位進行佈局,通過JS來動態計算網頁的視窗寬度,動態設定html的font-size,一切都比較完美。 這時候,你自信滿滿的將h5地址交給了APP工程師,做了一個WEBVIEW巢狀,然

H5 CSS樣式 小結

如何查詢相關文件 第一行程式碼 div { width: 500px; height: 500px; background-color

詳細解剖大型H5單頁面應用的核心技術點

事件機制 設置 橫豎 模板 phone inline lib 優點 溢出 闡述下項目 Xut.js 開發中一個比較核心的優化技術點,這是一套平臺代碼,並非某一個插件功能或者框架可以直接拿來使用,核心代碼大概是6萬行左右(不包含任何插件) 。這也並非一個開源項目,不能

小結:VB.NET機房收費系統個人版

style 曾經 static 設計 由於 什麽 圖書館 block 技術 經過幾天的縫縫補補,自己的個人版最終OK了,!或許是由於有第一次的機房收費系統的經驗,這次做,感覺很親切。 在業務邏輯方面,沿襲曾經的邏輯。做了一點升級。可是修改不大。

修復Extjs5.1.4表格設置enableTextSelection: true之後,文本仍然不能選擇的BUG

over del ble nav targe find ret lec parent 如果您發現其他版本也有此BUG,可參照此方式進行修復,源代碼中多了一句攔截mousedown事件的代碼mousedownEvent.preventDefault()造成的。 Ext.def

a標簽 可能會出現的bug

ref 當前頁 屬性 定位問題 實現 use 位置 你會 nload 在項目中a標簽遇到過的問題 發現問題:a標簽包裝的按鈕, 如果這個按鈕在頁面滾動後出現,你點擊後,頁面會定位到滾動以前的位置,但是我並不想要這種效果。 分析問題並嘗試: 一開始以為是光標定位問題,用doc

日程管理(bug report)

studio get pen 效果 角度 自定義 用戶登錄 回來 而是 1.退出程序停留在歡迎界面 bug Description: 測試環境:win10、工具android studio; 測試步驟: 描述:當點開程序時,不是直接到登錄界面,會有一個可自定義化的歡迎界

移動H5前端性能優化指南

例如 coo forms 指南 touchend meta 大於 動畫 節點 移動H5前端性能優化指南 概述 1. PC優化手段在Mobile側同樣適用2. 在Mobile側我們提出三秒種渲染完成首屏指標3. 基於第二點,首屏加載3秒完成或使用Loading4. 基於聯通

修復百度編輯器插入視頻的bug

問題 tar groovy util 實現 eve width 告訴 tps 修復百度編輯器插入視頻的bug,可實時預覽視頻,可修改到支持手機查看視頻開程序員的淘寶店!尋找開源技術服務夥伴!>>> 站在前人的肩膀上我們就可以站的更高,看得更遠。所以,請

日程管理app(bug report)

報錯 進行 android 設置 用戶登錄 登錄驗證 理想 運行 rip 一、用戶登錄驗證密碼過短   Description:   測試環境:Android Studio自帶的ADT模擬器(安卓6.0)   準備工作:將工程導入AS,並啟動模擬器進行測試   測試步驟:1