htmlで文字の幅がブラウザ事に異なる

htmlでdiv内にcontentEditable="true"を指定し書き込みが出来るようにしているのですが
背景をノート風にする為に、cssで文字の幅を指定しているのですが、IEでは思うようにいくのですが、chromeでは文字幅が変わってしまいます。
各ブラウザで同じように文字幅を変える為にはどのようにすればよろしいでしょうか。

css

div {
    font-size: 20pt;
    line-height: 15px;
	padding:200;
    /* 罫線描画（各ブラウザ対応）*/
    background-image: -webkit-linear-gradient(left, white 18px, transparent 8px), -webkit-linear-gradient(right, white 8px, transparent 8px), -webkit-linear-gradient(white 20px, #ccc 20px, #ccc 20px, white 22px);
    background-image: -moz-linear-gradient(left, white 8px, transparent 8px), -moz-linear-gradient(right, white 8px, transparent 8px), -moz-linear-gradient(white 20px, #ccc 20px, #ccc 21px, white 22px);
    background-image: -ms-linear-gradient(left, white 18px, transparent 8px), -ms-linear-gradient(right, white 8px, transparent 8px), -ms-linear-gradient(white 20px, #ccc 20px, #ccc 21px, white 22px);
    background-image: -o-linear-gradient(left, white 18px, transparent 8px), -o-linear-gradient(right, white 8px, transparent 8px), -o-linear-gradient(white 20px, #ccc 20px, #ccc 21px, white 22px);
    background-image: linear-gradient(left, white 8px, transparent 8px), linear-gradient(right, white 8px, transparent 8px), linear-gradient(white 20px, #ccc 20px, #ccc 21px, white 22px);
    background-size: 100% 100%, 100% 100%, 100% 25px;
    /* 淡いグレーで枠線を囲む */
    border: 1px solid #ccc;
	display:block;
  	height:200px;
  	border-style:solid;
  	border-width:2px;
  	border-color:#aaa;
  	overflow-x:hidden;
  	overflow-y:scroll;
}