IE9中的文本對齊問題
[英]Text Alignment Issue in IE9
問題描述
我有一個輸入字段，其中有一些文本。 在單擊按鈕時，我想將文本對齊方式更改為居中，左和右。
它適用於所有瀏覽器，但不適用於IE9。
<!DOCTYPE html>
<html>
<head>
<title> Test for Text Align</title>
<meta charset = "UTF-8" />
<style type="text/css">
#testBox{
text-align: left;
}
</style>
</head>
<div>
<input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
</div>
<div>
<input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
<input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
<input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
</div>
<script type="text/javascript">
function testFunction(el){
var testTextBox = document.getElementById("testBox");
if(el == "centeralign"){
testTextBox.style.textAlign = "center";
}else if (el == "leftalign") {
testTextBox.style.textAlign = "left";
}else if (el == "rightalign") {
testTextBox.style.textAlign = "right";
}
}
</script>
</html>
2 個解決方案
解決方案1
0 2013-12-04 11:02:18
如果您仍然沒有解決它，您可以根據需要在ie9測試的js代碼中獲得以下代碼。
<!DOCTYPE html>
<html>
<head>
<title> Test for Text Align</title>
<meta charset = "UTF-8" />
<style type="text/css">
#testBox{
text-align: left;
}
</style>
</head>
<body>
<div>
<input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
</div>
<div>
<input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
<input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
<input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
</div>
<script type="text/javascript">
function testFunction(el){
var testTextBox = document.getElementById("testBox");
if(el == "centeralign"){
testTextBox.style.textAlign = "center";
}else if (el == "leftalign") {
testTextBox.style.textAlign = "left";
}else if (el == "rightalign") {
testTextBox.style.textAlign = "right";
}
}
</script>
</body>
</html>
解決方案2
0 已采納 2013-12-04 11:30:31
這是IE中的一個奇怪的錯誤（至少是某些版本）。 通過事件處理程序屬性更改輸入框呈現的樣式時，似乎未更新。 在定義testTextBox之后添加以下內容似乎有幫助：
testTextBox.value += '';
這不會修改該值，因為它會附加一個空字符串，但似乎足以喚醒IE，以便它以更改后的樣式呈現輸入框。
IE9的GWT問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.