整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
T之家 3 月 25 日消息，在瀏覽器互通項目 Interop 2023 的倡議下，目前業界主流瀏覽器都開始統一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。
IT之家注：垂直表單控件主要用于呈現豎排文字，雖然此前 CSS 已經在書寫模式屬性中添加了豎排文字的支持，不過許多瀏覽器對表單控件 vertical-lr 和 vertical-rl 值都采用不同的標準，因此在先前的 Interop 2023 會議中，各廠商一致決定實現統一的垂直表單控件支持。
▲ 豎排文字示例在布局方面，目前 WebKit 中的表單控件大量使用自定義布局代碼，以在不同的環境和條件下保持一致和功能性，但此類布局代碼主要基于橫排模式設計，在豎排模式下會出現問題。
開發團隊在 Safari 17.4 版本中改進了相關代碼，在代碼計算邏輯寬度時會同時考慮豎排模式，同時也改進了自定義基線調整邏輯功能，使復選框和單選按鈕等控件能與豎排文字相搭配。
開發人員重點談到了 macOS 平臺 Safari 瀏覽器的改進，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會直接旋轉這些控件來支持豎排渲染。
不過有些擁有陰影的控件（例如 <select> ）無法單純通過旋轉來契合豎排模式，在遇到此類特定控件時，WebKit 便會為相關控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。
xcel豎排改橫排步驟如下：
首先，我們打開excel，如下圖，小編有一組已經輸好的數據，目前是豎排顯示的。
2怎么讓它變成橫排顯示呢？我們首先將數據框選起來，并右擊復制。
3在excel空白處選個單元格，作為橫排數據的起點。然后直接右擊，找到選擇性粘貼選項。
4選擇【選擇性粘貼】選項后，就會跳出下圖所示的小窗口。大家找到小編框選的【轉置】項目，目前它是沒有被勾選的。
5將【轉置】勾選，點擊確定。我們就可以得到橫排的數值了。
6同理，如果大家想要將原本橫排的數據變成豎排顯示，也只需選擇復制--選擇性粘貼--轉置，就可以完成橫豎排數值的轉換。
調查了身邊五六年經驗以上的幾個前端同學和同事，盡然發現絕大部分人都不知道，當然，在看到這個文章之前，我也不知道這個，平時雖然都一直在做web前端開發，但真沒涉及到這塊，或者說涉及到了，也解決了，但是還真沒探究過這個問題，你是否躺槍了呢？
這是一個很讓人困惑的CSS特征，我之前也談到過它。我們大家都知道，當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
下面是一個實例演示代碼，你可以調整容器的寬度，但你會發現，黃塊塊的padding-bottom的距離也會隨之寬度而變大或變小。
HTML代碼
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>寬度是: <span id="op">400px</span></output>
<output>黃塊塊的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代碼
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代碼中，我們對內部子元素聲明了3個豎向的距離，都是百分比形式。當移動滑塊時，我們的js代碼只需修改了容器的寬度。但是，這個這三個屬性高度都跟隨著變化，可以看出，它們的百分比計算是基于容器的寬度，而不是高度的。
切圖網致力于web前端技術開發，關注用戶體驗，關注移動web前端，響應式，微場景等技術，如果你對此感興趣請加公眾微信賬號：qietuwang
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
