Css chỉ có hiệu lực một phần khi truy cập web qua tên hostname?

#1

Có bạn nào biết nguyên nhân và cách khắc phục hiện tượng bên dưới xin chỉ giúp nhé :

Mình tạo 1 web test chỉ có 1 button và 1 textbox và cài đặt nó vào 1 máy với IIS.

Ở máy khác mình truy cập bang IE 11 theo 2 cách cho ra 2 giao diện khác nhau.
-Truy cập qua IP -> hiển thị đầy đủ css
-Truy cập qua tên máy -> hiển thị không đầy đủ

Hình bên dưới là kết quả

web.png515×656 69.7 KB

#2

Mình thử lưu 2 web xuống 2 folder và kiểm tra 2 file css thì file css của các truy cập bang tên có nội dung không đúng. Ví dụ :

border-radius: 4px; ------> BORDER-RADIUS: 4px --> không có hiệu lực bo tròn.

#3

Bạn thử thêm trên các trình duyệt khác đi, để có thể kết luận do trình duyệt hay webserver. Mình cũng vừa làm 1 cái web chạy iis theo 2 cách, 1 là ip, 1 là localhost thì ko thấy khác nhau gì cả, mà bạn bỏ cache rồi chứ?

#4

Bạn có chắc là css ở cả 2 cách truy cập được load giống nhau, có khi nào do config sai nên không load được file css

#5

Đây là nội dung file css tải về khi truy cập qua IP. Nó going hệt file css trên web server:

body {
	
}
.button {
	padding: 2px 6px; border-radius: 3px; border: 1px solid rgb(16, 144, 176); border-image: none; color: rgb(255, 255, 255); font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: bold; cursor: pointer; min-height: 25px; min-width: 60px; box-shadow: 0px 0px 2px 2px #ccc; text-shadow: 0px 1px 0px #063a46; background-color: rgb(0, 153, 204);
}
.button:hover {
	color: rgb(255, 255, 255);
}
.textbox {
	padding: 2px; border-radius: 4px; border: 1px solid rgb(204, 204, 204); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-image: none; color: rgb(85, 85, 85); line-height: 18px; display: inline-block; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075); background-image: none; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

Còn đây là file css khi truy cập qua hostname. Nhiều đoạn đã bị thay đổi so với file css gốc. Đây có lẽ là nguyên nhân làm web hiển thị không đúng. Nhiều đoạn trong file css đã biến thành viết hoa. Nhưng nguyên nhân file css bị tải sai nội dung là gì thì mình chưa rõ:

BODY {
	
}
.button {
	CURSOR: pointer; FONT-SIZE: 11px; BORDER-TOP: #1090b0 1px solid; FONT-FAMILY: Tahoma, Geneva, sans-serif; BORDER-RIGHT: #1090b0 1px solid; MIN-WIDTH: 60px; BORDER-BOTTOM: #1090b0 1px solid; FONT-WEIGHT: bold; COLOR: #fff; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; PADDING-LEFT: 6px; MIN-HEIGHT: 25px; BORDER-LEFT: #1090b0 1px solid; PADDING-RIGHT: 6px; BACKGROUND-COLOR: #09c; border-radius: 3px; box-shadow: 0 0 2px 2px #CCC; text-shadow: 0 1px 0 #063A46
}
.button:hover {
	COLOR: #ffffff
}
.textbox {
	BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid; BACKGROUND-IMAGE: none; BORDER-BOTTOM: #ccc 1px solid; COLOR: #555; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; PADDING-LEFT: 2px; BORDER-LEFT: #ccc 1px solid; DISPLAY: inline-block; LINE-HEIGHT: 18px; PADDING-RIGHT: 2px; BACKGROUND-COLOR: #fff; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
#6

Đây là nội dung 2 file index mình đã tải về. Nội dung nó khác nhau. Trong đó có 1 dòng (đầu tiên) có nói đến phiên bản IE và W3C. Không biết phải do dòng này hay không ?

HOSTNAME:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0026)http://apbivnxx0352/PCBWeb -->
<HTML><HEAD><META content="IE=7.0000" http-equiv="X-UA-Compatible">
<TITLE>Index</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<META name=viewport content=width=device-width><LINK rel=stylesheet 
href="Index_files/main.css">
<META name=GENERATOR content="MSHTML 11.00.9600.18860"></HEAD>
<BODY>
<DIV><INPUT class=button type=submit value=Submit> <INPUT class=textbox 
placeholder="Insert"> </DIV></BODY></HTML>

IP:

<!DOCTYPE HTML>
<!-- saved from url=(0027)http://172.26.13.190/PCBWeb -->
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000" 
http-equiv="X-UA-Compatible">
     
<META name="viewport" content="width=device-width">     
<META http-equiv="Content-Type" content="text/html; charset=utf-8"><LINK href="Index_files/main.css" 
rel="stylesheet">     <TITLE>Index</TITLE> 
<META name="GENERATOR" content="MSHTML 11.00.9600.18860"></HEAD> 
<BODY>
<DIV><INPUT class="button" type="submit" value="Submit">         <INPUT class="textbox" type="text" placeholder="Insert" value=""> 
    </DIV></BODY></HTML>
#7

OK !
Mình đã chú ý dòng này:

<META content="IE=7.0000" http-equiv="X-UA-Compatible">

Trên web server mình không có dòng này.
Mình đã them dòng

<META content="IE=11.0000" http-equiv="X-UA-Compatible">

thì đã OK rồi nhé.
Chơi với thằng IE đúng là mệt that.
Cảm ơn các bạn.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?