[發明專利]網頁表單元素對齊的方法和裝置

在審

• 申請號: 201480002963.3
• 申請日: 2014-10-16
• 公開（公告）號: CN104854559A
• 公開（公告）日: 2015-08-19
• 發明（設計）人: 林暢
• 申請（專利權）人: 深圳市融資城網絡服務中心有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F17/30
• 代理公司: 深圳市華優知識產權代理事務所(普通合伙) 44319
• 代理人: 冀博

技術領域

本發明涉及計算機應用技術領域，尤其涉及一種網頁表單元素對齊的方法和裝置。

背景技術

目前在網頁開發過程中，網頁中的表單元素如輸入框、單選按鈕、復選按鈕、下拉框、按鈕、文字、圖標等默認的樣式是不對齊的。但是為了保證網頁頁面的美觀，需要對這些表單元素進行垂直居中對齊，然而目前主流瀏覽器如IE、谷歌、火狐、360、Safari等對某些表單元素的樣式解析不一致；同時對于有多個版本的IE瀏覽器如IE7、IE8、IE9、IE10，某些表單元素在不同版本的IE瀏覽器下的表現也不一致。

為了解決上述問題目前處理方式是：當網頁提交表單的同一行出現表單元素時，讓瀏覽器默認處理；或者增加一個控制全局居中的vertical-align:middle樣式，使同一行的表單元素對齊。但是目前的這種處理方式只能使大多數瀏覽器瀏覽網頁時實現表單元素的垂直居中對齊，而不能保證所有不同瀏覽器瀏覽所述網頁時實現表單元素的垂直居中對齊。

發明內容

本發明的主要目的在于解決網頁在不同瀏覽器瀏覽模式下出現表單元素現不垂直居中對齊的技術問題。

為了實現上述目的，本發明提供一種頁面表單元素對齊的方法，包括：

步驟一、將網頁的每個表單元素所在父容器的行高調整為對應父容器的高度，并去除所述網頁中每個表單元素的內間距和外間距，生成網頁共同作用的第一CSS程序代碼；

步驟二、調用多個不同的瀏覽器依次瀏覽所述網頁，當某一瀏覽器瀏覽所述網頁時出現表單元素不垂直居中對齊的現象，則對所述網頁進行該某一瀏覽器專屬樣式調整，使該某一瀏覽器瀏覽所述網頁時所有表單元素垂直居中對齊，為每一個進行專屬樣式調整的瀏覽器生成一個網頁專屬作用的第二CSS程序代碼；

將所述第一CSS程序代碼和所有第二CSS程序代碼組成CSS文件引入所述網頁頭部，以使所述多個不同的瀏覽器后續瀏覽所述網頁時實現所有表單元素垂直居中對齊。

優選地，所述調用多個不同的瀏覽器依次瀏覽所述網頁，當某一瀏覽器瀏覽所述網頁時出現表單元素不垂直居中對齊的現象，則對所述網頁進行該某一瀏覽器專屬樣式調整，使該某一瀏覽器瀏覽所述網頁時所有表單元素垂直居中對齊包括：

預先設置待調用的多個不同瀏覽器的網頁瀏覽順序；

根據所述網頁瀏覽順序，依次調用對應的瀏覽器瀏覽所述網頁；

當某一瀏覽器瀏覽所述網頁出現表單元素不垂直居中對齊的現象，則對所述網頁進行該某一瀏覽器專屬樣式調整，使該某一瀏覽器瀏覽所述網頁時所有表單元素垂直居中對齊，然后調用下一瀏覽器瀏覽所述網頁。

優選地，對所述網頁進行該某一瀏覽器專屬樣式調整具體為：

對所述網頁中出現表單元素不垂直居中對齊的所在行內所有表單元素的內間距、外間距進行所述某一瀏覽器專屬樣式調整，使所述某一瀏覽器瀏覽所述網頁時相應行內所有表單元素垂直居中對齊。

優選地，所述多個不同的瀏覽器包括以下類型的瀏覽器：IE瀏覽器、谷歌瀏覽器、火狐瀏覽器、360瀏覽器、Safari瀏覽器；上述每種類型的瀏覽器包括至少一個版本的瀏覽器。

此外，為實現上述目的，本發明還提供一種頁面表單元素對齊的裝置，包括：

設置模塊，用于將網頁的每個表單元素所在父容器的行高調整為對應父容器的高度，并去除所述網頁中每個表單元素的內間距和外間距，生成網頁共同作用的第一CSS程序代碼；

調用模塊，用于調用多個不同的瀏覽器依次瀏覽所述網頁，當某一瀏覽器瀏覽所述網頁時出現表單元素不垂直居中對齊的現象，則對所述網頁進行該某一瀏覽器專屬樣式調整，使該某一瀏覽器瀏覽所述網頁時所有表單元素垂直居中對齊，為每一個進行專屬樣式調整的瀏覽器生成一個網頁專屬作用的第二CSS程序代碼；

引入模塊，用于將所述第一CSS程序代碼和所有第二CSS程序代碼組成CSS文件引入所述網頁頭部，以使所述多個不同的瀏覽器后續瀏覽所述網頁時實現所有表單元素垂直居中對齊。

優選地，所述調用模塊，具體用于預先設置待調用的多個不同瀏覽器的網頁瀏覽順序；根據所述網頁瀏覽順序，依次調用對應的瀏覽器瀏覽所述網頁；當某一瀏覽器瀏覽所述網頁出現表單元素不垂直居中對齊的現象，則對所述網頁進行該某一瀏覽器專屬樣式調整，使該某一瀏覽器瀏覽所述網頁時所有表單元素垂直居中對齊，然后調用下一瀏覽器瀏覽所述網頁。