CODEWITHSUNDEEP
cssinternet-explorer-9
Rex Chong
Rex Chong

Reputation: 11

IE 9 - text in text box got cut off after changing font-size (in percentage)

I got a weird behaviour in IE 9 (while firefox works fine) when I try to change the font-size of a fixed width texx box from 100% to 200%. The text in the input box got cut off partially. I don't know why and

I put my source and script in the below url. http://jsfiddle.net/VVyQm/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
</head>
<body>
<input style="width:100px;font-size:100%" type="text" value="abc"/>
</body>
</html>

Upvotes: 1

Views: 1131

Answers (2)

user2318800
user2318800

Reputation: 11

For IE you can refresh values in inputs after changing font size. After that displaying will be correct.

<input id="example_id" style="width:100px;font-size:100%" type="text" value="abc"/>
<script>
        $('body').css('font-size', '200%');    <!-- change font size -->
        $('#example_id').val($('#example_id').val()) <!-- refresh value-->
</script>

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

The problem is caused by some settings in the jsfiddle environment. Testing the following document directly in IE 9 does not exhibit the problem:

<!doctype html>
<meta charset=utf-8>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input style="width:100px;font-size:100%" type="text" value="abc"/>
<script>
$('body').css('font-size', '200%');
</script>

Thus, if the problem occurs in your environment outside jsfiddle, then it’s apparently caused by some other code, such as a library or framework being used.

Upvotes: 1

Related Questions