文章/答案/技术大牛

发布

社区首页 >问答首页 >IE9中的文本对齐问题

问IE9中的文本对齐问题
EN

Stack Overflow用户

提问于 2013-12-04 10:06:52

回答 2查看 445关注 0票数 1

我有一个输入字段，其中有一些文本。在点击一个按钮，我想改变文本-对齐中，左和右。

它适用于每个浏览器，但不适用于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>

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-12-04 11:30:31

这在IE中是一个奇怪的错误(至少有一些版本)。如果通过事件处理程序属性更改输入框呈现的样式，则输入框呈现似乎不会更新。在testTextBox定义之后添加以下内容似乎会有所帮助

testTextBox.value += '';

这并不会修改值，因为它附加了一个空字符串，但它似乎足以唤醒IE，从而使其以更改的样式呈现输入框。

票数 0

Stack Overflow用户

发布于 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20372343

复制

相似问题

问IE9中的文本对齐问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9中的文本对齐问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9中的文本对齐问题
EN