01/10/2018, 14:07

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

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ả

Văn Dương viết 16:08 ngày 01/10/2018

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.

Chien Dang viết 16:15 ngày 01/10/2018

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ứ?

Quân viết 16:13 ngày 01/10/2018

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

Văn Dương viết 16:19 ngày 01/10/2018

Đâ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
}

Văn Dương viết 16:09 ngày 01/10/2018

Đâ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>

Văn Dương viết 16:23 ngày 01/10/2018

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.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Văn Dương

0 chủ đề

0 bài viết

Tác giả nổi bật

Từ khóa nổi bật

AngularJS Blog Bootstrap C / C++ Cấu trúc dữ liệu & Giải thuật Cơ sở dữ liệu Codeigniter Công cụ lập trình CSS CSS cơ bản CSS3 Học Excel HTML HTML cơ bản HTML5 Java Javascript jQuery Json Lập trình mobile Laravel Linux MongoDB MySQL NodeJS Oracle Pascal PHP PHP cơ bản PHP nâng cao Python React Native ReactJS Ruby SEO SQL Server Swift Visual Basic VueJS WordPress XML

Chủ đề nổi bật

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

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI