سلام کد زیر رو ببینید وقتی <DOCTYPE html!> رو اضافه می کنم یک خط قرمز به زیر body اضافه میشه حالا مشکل خط قرمز نیست اینکه چرا این اتفاق میفته مهمه.
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>خطای 404</title>
<link rel="stylesheet" href="https://roocket.ir/../style/reset.css">
<style>
body {
display: flex;
background: linear-gradient(red,aqua);
background-size: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
height: cover;
}
</style>
</head>
<body>
<img src="../image/browser.svg" alt="404 Page Not Found">
<p>متاسفانه صفحه مورد نظر یافت نشد!</p>
</body>
</html>
این هم خروجی با background-size امتحان کردم ولی نمیشه
http://s11.picofile.com/file/8393096100/fgf.JPG
مقدار پیش فرضش برابر با اندازه ی محتوای عنصر شماست، چه عنصر html باشه، چه عنصر body باشه و چه موارد دیگه باشند.
https://developer.mozilla.org/en-US/docs/Web/CSS/height
عکسی که زیر کد گذاشتم😐
@miladhack84
شاید پاسخ شما همینجا باشد
این خط رو اضافه کن:
html { height: 100% }مگه قانونا نباید اینجوری باشه ؟
@milad
@milad
مشکل حل شد اما وقتی اندازه تصویر رو تغییر دادم و یا صفحه مرورگر رو بزرگ تر کردم باز به همین مشکل خوردم.
معلوم نیست این doctype با صفحه چیکار می کنه فلکس باک ها هم از کار انداخته
من تا به حال از doctype استفاده نمی کردم از وقتی که استفاده می کنم کلا فلکس ها و اندازه هام کلا ریخته بهم حالا من باید چیکار کنم
@miladhack84 @ali.bayat @milad @hesammousavi @juza66 @hossein.r.1442 @elyasbeshkani @endworld @mohsenbostan @rezajashnsaz0011
@arminamirinasab
خب استفاده نکنین 😐😂🤦♂️
آخه نمیشه که جز استاندارد های سئو هست و اینکه استاندارد برای همه مرورگر ها😐
@elyasbeshkani
مشکل جدیدتون نمیدونم چیه. متوجه مشکل جدید نشدم.
باز هم background تیکه تیکه میشه بعد از تغییر اندازه
@milad
یک نفر پاسخ بده این doctype چیکار می کنه تو صفحه من تا به حال بدون doctype کد می زدم و مشکلی نداشتم ولی حالا که استفاده می کنم تغییرات زیادی رو در صفحه می بینم.
فلکس های من دچار مشکل شد و اندازه بندی ها لطفا کمکم کنید این مشکل رو حل کنم
@ali.bayat @hesammousavi @hossein.r.1442 @mohsenbostan @elyasbeshkani @milad
@arminamirinasab سلام شما یک خطایی که دارید مقدار height: رو cover دادید:
body {
display: flex;
background: linear-gradient(red,aqua);
background-size: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
این کار رو انجام بدید احتمالا درست میشه
تغییرش دادم مشکل از اون نیست
@alirezatahriri
تست کردم باز همین مشکل موجوده
@hossein.r.1442
درود...
اساسا در قرار گیری <DOCTYPE html!> نباید مشکل ایجاد کنه...
شاید مشکل از مرورگر باشه یا در تگ body بهش استایل دادید ...